使用vue分页插件vue-pagination

参考前辈的demo，所以先放上原demo的git地址：

https://github.com/cycgit/vue-pagination

Paste_Image.png

按照惯例，先引入必须的资源，然后在项目的html中加入分页模板：

js代码照样搬就可以了：

var app = new Vue({
                el: '#app',
                data:{
                    cur: 1,
                    all: 23，
                    url:'localhost:6677/queryList'
                },
                components:{
                    'vue-nav': Vnav
                },
                methods:{
                    callback(data) {
                        //TODO
                    }
                }
            })

这里 cur是当前页，all是总页数，url是查询列表服务的url地址，然后看一下组件的处理

(function () {
    var tm = '
' +
        '
' +
        '
上一页
' +
        '
' +
        '{{ index }}' +
        '
' +
        '
下一页
' +
        '
共{{all}}页
' +
        '
' +
        '
'

    var navBar = Vue.extend({
        template: tm,
        props: {
            cur: {
                type: [String, Number],
                required: true
            },
            all: {
                type: [String, Number],
                required: true
            },
            url: {
                type: [String, Number],
                required: true
            },
            callback: {
                default() {
                    return function callback() {
                        // todo
                    }
                }
            }
        },
        computed: {
            indexs() {
                var left = 1
                var right = this.all
                var ar = []
                if (this.all >= 11) {
                    if (this.cur > 5 && this.cur < this.all - 4) {
                        left = this.cur - 5
                        right = this.cur + 4
                    } else {
                        if (this.cur <= 5) {
                            left = 1
                            right = 10
                        } else {
                            right = this.all
                            left = this.all - 9
                        }
                    }
                }
                while (left <= right) {
                    ar.push(left)
                    left++
                }
                return ar
            }
        },
        methods: {
            btnClick(page) {
                if (page != this.cur) {
                    this.callback(page)
                }
                //这里可以发送ajax请求
            }
        }
    })

    window.Vnav = navBar

})()

整个插件整合之后的效果如下：

Paste_Image.png

谢谢观赏！