vue 实现简单分页

<template>
  <div style="width: 100%;">
    <div class="page" v-show="show">
      <div class="pagelist" style="padding-top: 20px;">
        <span class="jumpPage" v-if="current>1" @click="previousPage()">上一页</span>
        <span class="jumpS" v-else>上一页</span>
        <span v-show="current>5 && total>7" class="jump" @click="jumpPage(1)">1</span>
        <span class="ellipsis" v-show="efont">...</span>
        <span class="jump" v-for="num in indexs" :class="{bgprimary:current==num}"
          @click="jumpPage(num)">{{num}}</span>
        <span class="ellipsis" v-show="efont && current<total-4">...</span>

        <span class="jumpPage" v-if="current<total" @click="nextPage()">下一页</span>
        <span class="jumpS" v-else>下一页</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        current: 1,
        sizes: 10,
        total: 1,
      }
    },
    created() {

    },
    computed: {
      show: function() {
        return this.total && this.total != 0
      },
      efont: function() {
        if (this.total <= 7) return false;
        return this.current > 5
      },
      indexs: function() {
        var left = 1,
          right = this.total,
          ar = [];
        if (this.total >= 7) {
          if (this.current > 5 && this.current < this.total - 4) {
            left = Number(this.current) - 3;
            right = Number(this.current) + 3;
          } else {
            if (this.current <= 5) {
              left = 1;
              right = 7;
            } else {
              right = this.total;

              left = this.total - 6;
            }
          }
        }
        while (left <= right) {
          ar.push(left);
          left++;
        }
        return ar;
      },
    },
    mounted: function() {

    },
    components: {

    },
    methods: {
      //上一页
      previousPage() {
        let self = this
        self.current--
      },
      //下一页
      nextPage() {
        let self = this
        self.current++
      },
      //选中页数
      jumpPage(id) {
        let self = this
        self.current = id
      },
    },
  }
</script>

<style>
  .page {
    width: 100%;
    height: 40px;
    text-align: center;
    color: #888;
    margin: 0 auto 0;
    background: #f2f2f2;
    line-height: 40px;
  }

  .pagelist {
    font-size: 0;
    background: #fff;
    height: 50px;
    line-height: 50px;
    user-select: none;
  }

  .pagelist span {
    font-size: 16px;
  }

  .pagelist .jump {
    font-size: 14px;
    padding: 5px 11px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
    background-image: linear-gradient(to bottom, #f1f1f1, #e5e5e5);
  }

  .pagelist .jumpPage {
    font-size: 14px;
    padding: 5px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
    color: #FFFFFF;
    background-image: linear-gradient(to bottom, #fa9703, #f89702);
  }

  .pagelist .jumpS {
    font-size: 14px;
    padding: 5px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
    background-color: #f1f1ef;
  }

  .pagelist .bgprimary {
    cursor: default;
    color: #fff;
    background-image: linear-gradient(to bottom, #fa9703, #f89702);
  }

  .jumpinp input {
    width: 55px;
    height: 26px;
    font-size: 13px;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
  }

  .ellipsis {
    padding: 0px 8px;
  }

  .pagelist .gobtn {}

  .bgprimary {
    cursor: default;
    color: #fff;
    background-image: linear-gradient(to bottom, #fa9703, #f89702);
  }
</style>