vue分页组件编写

点击查看vue分页组件源码：https://github.com/317482454/vue_pageination

npm：

npm i vue_pageination --save

vue中使用：

import pageination from 'vue_pageination';
Vue.use(pageination);

<pageination :total="50" :size="size" :page="10" :changge="pageFn" :isUrl="true"></pageination>

效果图：

1.props对象：（不解释是做啥的，不懂的点击：https://cn.vuejs.org/v2/api/#props）

props: ['total', 'size', 'page', 'changge', 'isUrl']

2.data对象：

 data(){
      return {
        pageinationTotal: this.total,//总条目数
        pageinationSize: this.size ? this.size : 10,//每页显示条目个数
        pageinationLength: [],
        pageinationCurrentPage: this.page ? this.page : 1,//当前页数默认1
        pageinationPage: 0,//可分页数
        startDisabled: true,//是否可以点击首页上一页
        endDisabled: true,//是否可以点击尾页下一页
        pageChangge: this.changge,//修改方法
        pageIsUrl: this.isUrl ? true : false,//是否开启修改url
      }
    },

3.计算可分页数：

 this.pageinationPage = Math.ceil(this.pageinationTotal / this.pageinationSize);//取整有小数往上+1

4.页码计算：

        //是否可以点击上一页首页
        this.startDisabled = this.pageinationCurrentPage != 1 ? false : true;
        //是否可以点击下一页尾页
        this.endDisabled = this.pageinationCurrentPage != this.pageinationPage ? false : true;
        //重置
        this.pageinationLength = [];
        //开始页码1
        let start = this.pageinationCurrentPage - 4 > 1 ? this.pageinationCurrentPage - 4 : 1;
        //当前页码减去开始页码得到差
        let interval = this.pageinationCurrentPage - start;
        //最多9个页码，总页码减去interval 得到end要显示的数量+
        let end = (9 - interval) < this.pageinationPage ? (9 - interval) : this.pageinationPage;
        //最末页码减开始页码小于8
        if ((end - start) != 8) {
          //最末页码加上与不足9页的数量，数量不得大于总页数
          end = end + (8 - (end - start)) < this.pageinationPage ? end + (8 - (end - start)) : this.pageinationPage;
          //最末页码加上但是还不够9页，进行开始页码追加，开始页码不得小于1
          if ((end - start) != 8) {
            start = (end - 8) > 1 ? (end - 8) : 1;
          }
        }
        for (let i = start; i <= end; i++) {
          this.pageinationLength.push(i);
        }

5.html代码：

    <div @click="pageUp(0)" class="pagination_page" :class="startDisabled?'disabled':''">首页</div>
    <div @click="pageUp(1)" class="pagination_page" :class="startDisabled?'disabled':''">上一页</div>
    <div class="pagination_page" :class="item==pageinationCurrentPage?'pagination_page_active':''"
         v-for="item in pageinationLength" @click="jump(item)">
      {{item}}
    </div>
    <div @click="pageDown(1)" class="pagination_page" :class="endDisabled?'disabled':''">下一页</div>
    <div @click="pageDown(0)" class="pagination_page pagination_page_right" :class="endDisabled?'disabled':''">尾页</div>

6.关于返回当前页码

   pageCurrentChange(){
      this.pageChangge(this.pageinationCurrentPage);
   }

使用：

changge：页码切换方法触发，比如：传入pageFn方法接收page页码

pageFn(val){ this.page = val; }