vue-cli -- 分页器

vue-paginate分页组件
源代码：

npm i vue_pageination --save

// 局部使用，哪个组件使用就引入
import pageination from 'vue_pageination';
Vue.use(pageination);

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

// props对象传值
props: ['total', 'size', 'page', 'changge', 'isUrl']

// 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
      }
    },

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

// 页码计算
//是否可以点击上一页首页
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);
}

// 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>


// 返回当前页码
   pageCurrentChange(){
      this.pageChangge(this.pageinationCurrentPage);
   }

// 方法调用
changge：页码切换方法触发，比如：传入pageFn方法接收page页码
 
pageFn(val){ this.page = val; }

HTML代码

<div id="paginate" v-cloak>
    <ul class="pagination">
      <li>
        <a v-if="currentPage == 1">首页</a>
        <a v-else href="javascript:;" @click="next(1)">首页</a>
      </li>
      <li v-if="currentPage<=1">
        <a>上一页</a>
      </li>
      <li v-else>
        <a href="javascript:;" @click="next(currentPage-1)">上一页</a>
      </li>
      <li v-for="(item, index) in pagingList" :key="index">
        <a v-if="currentPage==item.key || sign ==item.key && currentPage>1">{{item.key}}</a>
        <a v-else href="javascript:;" @click="next(item.value)">{{item.key}}</a>
      </li>

      <li v-if="currentPage>=totalPageCount">
        <a>下一页</a>
      </li>
      <li v-else>
        <a href="javascript:;" @click="next(currentPage+1)">下一页</a>
      </li>
      <li>
        <a v-if="totalPageCount == currentPage">尾页</a>
        <a v-else href="javascript:;" @click="next(totalPageCount)">尾页</a>
      </li>
    </ul>
    <p>
      共:{{totalPageCount||0}}页,当前页为第{{currentPage||0}}页 设置总页数:
      <input style="width:20px;" v-model="totalPageCount">
    </p>
  </div>

CSS代码

// 粗略版，需要自己美化
<style>
  #paginate {
    width: 500px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    background-color: #cccccc;
  }
  #mylink {
    color: #efefef;
  }
  .pagination {
    list-style: none;
    text-align: center;
    height: 50px;
    padding-top: 50px;
  }
  .pagination > li {
    float: left;
    margin: 0 5px;
  }
  [v-cloak] {
    display: none;
  }
</style>

data中的数据

data () {
    return {
      // 省略的符号
      sign: '...',
      // 省略号位置
      signIndex: 4,
      // 总页数
      totalPageCount: 10,
      // 当前页
      currentPage: 1,
      // 显示在页面的数组列表
      pagingList: []
    }
  }

监听器

watch: {
    totalPageCount (val) {
      var that = this
      if (!val || val === '') return
      that.currentPage = 1
      that.init()
    },
    currentPage (val) {
      var that = this
      that.init()
 

mounted函数

methods: {
    // 跳转到某页码
    next (num) {
      var that = this
      if (num <= 1) that.currentPage = 1
      else if (num >= that.totalPageCount) { that.currentPage = that.totalPageCount } else that.currentPage = num
    },
    // 初始化数据
    fetchData () {
      var that = this
      that.pagingList = []
      var tmp = null
      if (that.totalPageCount > 6) {
        if (
          that.totalPageCount - 1 === that.totalPageCount - that.currentPage &&
            that.totalPageCount - that.currentPage > 5
        ) {
          for (var i = 1; i < 7; i++) {
            if (i < that.signIndex) {
              tmp = { key: i, value: i }
            } else if (i === that.signIndex) {
              tmp = { key: that.sign, value: 0 }
            } else if (i === that.signIndex + 1) {
              tmp = {
                key: that.totalPageCount - 1,
                value: that.totalPageCount - 1
              }
            } else {
              tmp = { key: that.totalPageCount, value: that.totalPageCount }
            }
            that.pagingList.push(tmp)
          }
        } else if (that.totalPageCount - that.currentPage <= that.signIndex) {
          var starNum = that.totalPageCount - 5
          for (i = starNum; i < starNum + 6; i++) {
            tmp = { key: i, value: i }
            that.pagingList.push(tmp)
          }
        } else {
          let starNum = that.currentPage - 1
          for (i = 1; i < 7; i++) {
            if (i < that.signIndex) {
              tmp = { key: starNum - 1 + i, value: starNum - 1 + i }
            } else if (i === that.signIndex) {
              tmp = { key: that.sign, value: 0 }
            } else if (i === that.signIndex + 1) {
              tmp = {
                key: that.totalPageCount - 1,
                value: that.totalPageCount - 1
              }
            } else {
              tmp = { key: that.totalPageCount, value: that.totalPageCount }
            }
            that.pagingList.push(tmp)
          }
        }
      } else {
        for (i = 0; i < that.totalPageCount; i++) {
          tmp = { key: i + 1, value: i + 1 }
          that.pagingList.push(tmp)
        }
      }
    },
    init () {
      var that = this
      that.fetchData()
    }
  }

挂在执行

mounted () {
    var that = this
    that.init()
  }

引入组件

import paginate from '../components/paginate.vue'

注入组件
js components: { paginate } **使用组件**js