nuxtjs 之vue分页插件轮子

已有vue 分页插件很多 怎奈 nuxtjs 引入一直不成功 ，没办法只能自己造个轮子，样式基于bootstrap

效果如图：

 点击最后两个页码或头部两个页码 ，页码会滚动

源码：

<template>
  <div>
    <div class="t1">
      {{total}}条 {{page}}页
      <select class="form-control" @change="changePageSize" v-model="pageSize">
        <option :value="item" :key="item" v-for="item in [1,2,3]">{{item}}/页</option>
      </select>
    </div>
    <div class="t2">
      <ul class="pagination">
        <li :class="{'disabled':index==1}">
          <a href="javascript:;" @click="home">
            <span aria-hidden="true">首页</span>
          </a>
        </li>
        <li :class="{'disabled':index==1}">
          <a href="javascript:;" @click="pre">
            <span aria-hidden="true">上一页</span>
          </a>
        </li>
        <template v-for="i in pageIndex">
          <li :key="i" :class="{'active':i==index}" v-if="i<=page">
            <a href="javascript:;" @click="pageChange(i)">{{i}}</a>
          </li>
        </template>
        <li>
          <a href="javascript:;" @click="nex" :class="{'disabled':index==page}">
            <span aria-hidden="true">下一页</span>
          </a>
        </li>
        <li>
          <a href="javascript:;" @click="tail" :class="{'disabled':index==page}">
            <span aria-hidden="true">尾页</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  props: ["total", "ipageSize"],
  data() {
    return {
      index: 1,
      currentIndex: 1,
      page: 0,
      pageSize: 1,
      pageIndex: [],
    };
  },
  mounted() {
    this.page = Math.ceil(this.total / this.pageSize);
    var max = 10;
    if (this.page < max) max = this.page;
    for (var i = 1; i <= max; i++) {
      this.pageIndex.push(i);
    }
  },
  methods: {
    pageChange(i) {
      this.index = i;
      if (this.currentIndex == this.index) return;
      this.currentIndex = this.index;
      if (
        (this.pageIndex[this.pageIndex.length - 1] == i ||
          this.pageIndex[this.pageIndex.length - 2] == i) &&
        this.pageIndex[this.pageIndex.length - 1] < this.page
      ) {
        i = this.pageIndex[this.pageIndex.length - 1];
        this.pageIndex.shift();
        this.pageIndex.shift();
        this.pageIndex.shift();
        this.pageIndex.shift();
        this.pageIndex.push(i + 1);
        this.pageIndex.push(i + 2);
        this.pageIndex.push(i + 3);
        this.pageIndex.push(i + 4);
      }

      this.offset = this.pageIndex[0] - 4;
      if (
        (this.pageIndex[1] == i || this.pageIndex[0] == i) &&
        this.offset > 0
      ) {
        i = this.pageIndex[0];
        this.pageIndex.pop();
        this.pageIndex.pop();
        this.pageIndex.pop();
        this.pageIndex.pop();
        this.pageIndex.unshift(i - 1);
        this.pageIndex.unshift(i - 2);
        this.pageIndex.unshift(i - 3);
        this.pageIndex.unshift(i - 4);
      }

      this.$emit("page", i, this.pageSize);
    },
    changePageSize() {
      this.page = Math.ceil(this.total / this.pageSize);
      var max = 10;
      this.pageIndex = [];
      for (var i = 1; i <= max; i++) {
        this.pageIndex.push(i);
      }
      if (this.index > this.page) this.index = this.page;
      this.$emit("page", this.index, this.pageSize);
    },
    home() {
      if (this.index == 1) return;
      this.index = 1;
      this.pageChange(this.index);
    },
    tail() {
      if (this.index == this.page) return;
      this.index = this.page;
      var max = 10;
      this.pageIndex = [];
      if (this.page < max) {
        for (var i = 1; (max = this.page), i <= max; i++) {
          this.pageIndex.push(i);
        }
      } else {
        for (var i = this.page - 10; (max = this.page), i <= max; i++) {
          this.pageIndex.push(i);
        }
      }
      this.pageChange(this.index);
    },
    pre() {
      if (this.index == 1) return;
      this.index--;
      this.pageChange(this.index);
    },
    nex() {
      if (this.index == this.page) return;
      this.index++;
      this.pageChange(this.index);
    },
  },
};
</script>
<style scoped>
* {
  font-size: 12.58px !important;
}
select {
  width: 90px;
  padding: 0px 5px 0px 15px;
  display: inline-block;
  border-radius: 3px;
  font-size: 13px;
  height: 24px;
  margin-left: 7px;
}
.pagination {
  margin: 0px;
}
.t1,
.t2 {
  display: inline-block;
}
.t1 {
  float: left;
  margin-top: 5px;
  margin-right: 10px;
  color: rgb(96, 98, 102);
}
</style>

使用：

import pageinate from '../../components/pageinate'

<pageinate :total="items.total"  @page="pageChange"></pageinate>