image.png

<template>
  <section class="pagination">
    <div class="container">
      <span @click="onClickPre" :class="current === 1 ? 'disabled' : ''"
        ><i class="iconfont icon-arrowleft"></i
      ></span>
      <span
        v-for="num in len"
        :class="num === current ? 'actived' : ''"
        @click="setCurValue(num)"
        >{{ num }}</span
      >
      <span @click="onClickNext" :class="current === len ? 'disabled' : ''"
        ><i class="iconfont icon-arrowright"></i
      ></span>
    </div>
  </section>
</template>

<script>
export default {
  name: 'MPagination',
  model: {
    // v-model方法
    prop: 'current',
    event: 'change'
  },
  props: {
    total: {
      require: true
    },
    pageSize: {
      type: Number,
      default: 10
    },
    current: {
      type: Number,
      default: 1
    }
  },
  computed: {
    len () {
      return this.total && Math.ceil(this.total / this.pageSize)
    }
  },
  methods: {
    setCurValue (current) {
      this.$emit('change', current)
    },
    onClickNext () {
      if (this.current < this.len) {
        this.$emit('change', this.current + 1)
      }
    },
    onClickPre () {
      if (this.current > 1) {
        this.$emit('change', this.current - 1)
      }

    }
  }
}
</script>

<style lang="less" scoped>
.pagination {
  padding: 3rem 0 5rem 0;
}

.pagination span {
  display: inline-block;
  padding: 1rem 1.5rem;
  border: 1px solid #243a6f;
  font-size: 1.8rem;
  margin-bottom: 2rem;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  &:not(.disabled) {
    &:hover,
    &.actived {
      border: 1px solid #243a6f;
      background-color: #243a6f;
      color: #fff;
    }
  }

  &.disabled {
    color: #d9d9d9;
    border: 1px solid #d9d9d9;
    cursor: not-allowed;
  }
}
</style>

    <m-pagination
          v-model="current"
          :total="26"
          :pageSize="10"
        ></m-pagination>

• 關鍵實現：

  
  
  image.png