每次在 h5 页中用 vue.js 时, 会碰到一些平尝 UI 库里的插件效果 (比如分页), 由于页面内容不多, 感觉引入一个 UI 库有点浪费, 手写又来不及, 特闲暇时封装来用, 样式如下 (样式 可修改):
本组件是在 h5 中自定义的 template 实现, 如下:
所以只需要将当前 JS 引入到 html 并放在 vue 下面即可.
HTML 中使用方法:
- <page-list :totalpage='80' :jumppage="true" @clickpages='clickpages'>
- </page-list>
- //totalpage: 总共有多少页 jumppage: 是否展示跳转输入框 clickpages: 点击分页后的回调
在 vue 中的注册方法:
- new Vue({
- el: '#app',
- components: {
- 'page-list': pageList
- },
- methods: {
- clickpages(num) {
- console.log(num)
- }
- }
- })
注: 当前组件必须再 el 绑定的元素中使用.
下载地址: https://files-cdn.cnblogs.com/files/caoxiaokang/page-rar.zip
Git 源码地址: https://github.com/173269537121/vue-page.git
来源: http://www.bubuko.com/infodetail-3359622.html