发表于 |

绝对底部(保持footer在页面最底部)

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对底部(保持footer在页面最底部)</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        height: 100vh;
    }
    #wrap {
        height: auto;
        min-height: 100%;
    }
    #main {
        padding-bottom: 150px; /* 和footer相同的高度 */
    }
    #footer {
        margin-top: -150px; /* footer高度的负值 */
        height: 150px;
        background: #0c8ed9
    }
</style>

<div id="wrap">
    <div id="main">
        <div id="app" style="padding: 40px;">
            <button @click="toggle">切换数据长度 {{length}}</button>
            <ul>
                <li v-for="i in length">数据</li>
            </ul>
        </div>
    </div>
</div>
<div id="footer">底部</div> <!--底部和外层同级-->
</body>
<script>
    const lenArr = [20,400]
    new Vue({
      el: '#app',
      data:{
        length: lenArr[0]
      },
      methods:{
        toggle(){
          this.length = this.length === lenArr[0]?lenArr[1]:lenArr[0]
        }
      }
    })
</script>
</html>

发表于 |

wxchat-group-helper

准备

  • 安装 python3.x

  • 安装依赖

    pip3 install itchat

运行

python3 wx.py

github

发表于 |

微信jssdk vue组件

如何使用

npm install st_wx -S

相关依赖

  • jweixin-1.2.0.js

所有组件

  • ST_IMAGE_UPLOADER 图片上传组件

    • props
      • v-modal [{serverId:'',url:'localId||url',localId:''}]
    • methods
      • stStart 打开图片选择器

  • ST_VOICE_UPLOADER 语音上传组件

    • props
      • v-modal [{serverId:'',url:'localId||url',localId:'',duration:2}]
        • duration 时长（单位s）
    • methods
      • stShowRecord 打开录音弹窗

如何使用

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 

import Vue from "vue"
import StWx , {jsApiList} from 'st_wx'
Vue.use(StWx)

export default {
    name: 'PageStWx',
    data () {
      return {
        images: [],
        voices: []
      }
    },
    created(){
        const vm = this
        // 初始化wx jssdk $wx jssdk组件（自动注入）
        vm.$wx.config({ 
          "appId": "",
          "nonceStr": "",
          "signature": "",
          "timestamp": "",
          "url": "",
          "jsApiList":jsApiList
        })
    }
}

html

1
2
3
4
5
6
7
8
 

<st-image-uploader ref="imageUploader" v-model="images"></st-image-uploader>

<button @click="$refs.imageUploader.stStart()">上传图片</button>

<st-voice-uploader ref="voiceUploader" v-model="voices"></st-voice-uploader>

<button @click="$refs.voiceUploader.stShowRecord()">开始录音</button>

效果图


github

发表于 |

mz 魅族官网项目

开发环境

  • 使用vue-cli脚手架搭建环境
  • 使用sass预编译工具
  • 使用Es6语法
  • 使用Element-ui组件
  • 使用json-server 后端api模拟

参考

github

发表于 |

chrome-pluign-helper

微信企业号官网配置自动填入密码，hack顶部提示窗挡住顶部操作按钮的问题

plugin/img/logo.png

github