Vue 分页组件 v2.0

背景

之前也写过一个分页组件，非常简洁的一个分页组件。
效果图: 传送门

代码也很简单，看看就懂了。
当页数多起来的时候，问题也就来了。

这.......
迫不得已，我把页码显示的去掉，就成了

看着是没啥问题，可是需求方不乐意了。。。

他们希望，页码多起来的时候能出现 ...
效果：

Vue 分页组件 2.0

             首页              上一页               {{ p.text }}              下一页             尾页             1.  共 {{ total }}  条数据                         1.  每页显示 {{ display }}  条数据             1.  共 {{ page }} 页             1.  当前第 {{ current }} 页 

/  * [pagination 分页组件] * @param  {Number} total         [数据总条数] * @param  {Number} display     [每页显示条数 default:10] * @param  {Number} current     [当前页码 default:1] * @param  {Number} pagegroup     [分页条数(奇数) default:5] * @param  {Event} pagechange     [页码改动时 dispatch ] * @return {[type]}   [description] */Vue.component('pagination', {    template: '# template_pagination',    props: {        total: {            // 数据总条数            type: Number,            default: 0        },        display: {            // 每页显示条数            type: Number,            default: 10        },        current: {            // 当前页码            type: Number,            default: 1        },        pagegroup: {        // 分页条数 -- 奇数            type: Number,            default: 5,            coerce:function(v){                v = v > 0 ? v : 5;                return v % 2 === 1 ? v : v + 1;            }        }    },    computed: {        page:function() { // 总页数            return Math.ceil(this.total / this.display);        },        grouplist:function(){ // 获取分页页码            var len = this.page , temp = [], list = [], count = Math.floor(this.pagegroup / 2) ,center = this.current;            if( len  this.page - count) && ( center = this.page - count);            temp = temp.splice(center - count -1, this.pagegroup);                            do {                var t = temp.shift();                list.push({                    text: t,                    val: t                });            }while(temp.length);                            if( this.page > this.pagegroup ){                (this.current > count + 1) && list.unshift({ text:'...',val: list[0].val - 1 });                (this.current  0 && idx         # Vue 分页组件         {{ $data|json }}var app = new Vue({    el: '# app',    data: {        total: 81,     // 记录总条数        display: 10,   // 每页显示条数        current: 1     // 当前第n页 ， 也可以 watch current 的变化     },    events:{        pagechange:function(p){     // 页码改变event ， p 为新的 current            console.log('pagechange',p);        }    }});

效果传送门

关键字：vue.js, idx, count, default

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！