封裝分頁插件

<template>
  <ul class="app-pagination" v-if=" totalPage > 1">
    <template v-if="url">
      <li>
        <a :href="`${url}${1}${query}`">首頁</a>
      </li>
      <!-- 上一頁 -->
      <li>
        <a v-if="this.current > 1" :href="`${url}${current - 1}${query}`">
          <i class="el-icon el-icon-arrow-left"></i>
        </a>
        <div v-else class="disable-icon">
          <i class="el-icon el-icon-arrow-left disabled"></i>
        </div>
      </li>
      <!-- 第一頁 -->
      <li :class="{ active: current === 1, disabled }" v-if="totalPage > 0" class="number">
        <a :href="`${url}${1}${query}`">1</a>
      </li>
      <!-- 左快速翻頁 -->
      <li v-if="showPrevMore" @mouseenter="onMouseenter('left')" @mouseleave="quickprevIconClass = 'el-icon-more'">
        <a :href="`${url}${current - offset}${query}`">
          <i class="el-icon more btn-quickprev" :class="[quickprevIconClass]"></i>
        </a>
      </li>
      <!-- 中間頁 -->
      <li v-for="index in pagers" :key="index" :class="{ active: current == index }">
        <a :href="`${url}${index}${query}`">{{ index }}</a>
      </li>
      <!-- 右快速翻頁 -->
      <li v-if="showNextMore" @mouseenter="onMouseenter('right')" @mouseleave="quicknextIconClass = 'el-icon-more'">
        <a :href="`${url}${current + offset}${query}`">
          <i class="el-icon more btn-quicknext" :class="[quicknextIconClass]"></i>
        </a>
      </li>
      <!-- 最後一頁 -->
      <li :class="{ active: current === totalPage, disabled }" v-if="totalPage > 1">
        <a :href="`${url}${totalPage}${query}`">{{
                    totalPage
                }}</a>
      </li>
      <!-- 下一頁 -->
      <li>
        <a v-if="this.current < this.totalPage" :href="`${url}${current + 1}${query}`">
          <i class="el-icon el-icon-arrow-right"></i>
        </a>
        <div v-else class="disable-icon">
          <i class="el-icon el-icon-arrow-right disabled"></i>
        </div>
      </li>
      <!-- 尾頁 -->
      <li>
        <a :href="`${url}${totalPage}${query}`">尾頁</a>
      </li>
    </template>
  </ul>
</template>
<script>
  export default {
    name: "seo-pagination",
    props: {
      url: {
        // 分頁連接
        required: false,
        type: [String],
        default: null,
      },
      // 請求參數
      query: {
        type: String,
        default: ''
      },
      total: {
        required: false,
        type: [Number],
        default: 0,
      },
      page: {
        required: false,
        type: [Number, String],
        default: 0,
      },
      pageSize: {
        type: Number,
        default: 10,
      },
      pagerCount: {
        type: Number,
        default: 7,
      },
      disabled: Boolean,
    },
    data() {
      return {
        current: 1,
        showItem: 5,
        showPrevMore: false,
        showNextMore: false,
        quicknextIconClass: "el-icon-more",
        quickprevIconClass: "el-icon-more",
      };
    },
    computed: {
      pagers() {
        //頁容量
        const pagerCount = this.pagerCount;
        const halfPagerCount = (pagerCount - 1) / 2;

        const current = Number(this.current);
        //總分頁
        const pageCount = Number(this.totalPage);

        let showPrevMore = false;
        let showNextMore = false;

        if (pageCount > pagerCount) {
          //當前頁>也容量 - 一半頁容量
          if (current > pagerCount - halfPagerCount) {
            showPrevMore = true;
          }

          if (current < pageCount - halfPagerCount) {
            showNextMore = true;
          }
        }

        const array = [];
        //向前翻頁
        if (showPrevMore && !showNextMore) {
          const startPage = pageCount - (pagerCount - 2);
          for (let i = startPage; i < pageCount; i++) {
            array.push(i);
          }
        } else if (!showPrevMore && showNextMore) {
          for (let i = 2; i < pagerCount; i++) {
            array.push(i);
          }
        } else if (showPrevMore && showNextMore) {
          const offset = Math.floor(pagerCount / 2) - 1;
          for (let i = current - offset; i <= current + offset; i++) {
            array.push(i);
          }
        } else {
          for (let i = 2; i < pageCount; i++) {
            array.push(i);
          }
        }

        this.showPrevMore = showPrevMore;
        this.showNextMore = showNextMore;
        console.log(array, "arr");
        return array;
      },
      // 總分頁數
      totalPage() {
        return Math.ceil(this.total / this.pageSize);
      },
      // 跳轉長度
      offset() {
        return Math.floor(this.pagerCount / 2);
      }
    },
    watch: {
      page: {
        handler(val) {
          this.current = Number(val);
        },
        immediate: true,
      },
      showPrevMore(val) {
        if (!val) this.quickprevIconClass = "el-icon-more";
      },

      showNextMore(val) {
        if (!val) this.quicknextIconClass = "el-icon-more";
      },
    },
    methods: {
      onMouseenter(direction) {
        if (this.disabled) return;
        if (direction === "left") {
          this.quickprevIconClass = "el-icon-d-arrow-left";
        } else {
          this.quicknextIconClass = "el-icon-d-arrow-right";
        }
      },
      // pageClick(e) {
      //   // console.log(e, "eeeeeeeeee");
      //   // this.$emit('pageClick', e)
      // }
    },
  };
</script>
<style lang="scss" scoped>
  .app-pagination {
    margin: 40px auto;
    text-align: center;

    li {
      display: inline-block;
      margin: 0;
      font-weight: 700;
      font-size: 13px;

      a {
        padding: 8px;
        display: inline-block;
        color: #626262;

        &:hover {
          color: #409eff;
        }
      }

      &.active a {
        color: #409eff;
      }

      .disable-icon {
        padding: 8px;
        color: #c0c4cc;
        cursor: not-allowed;
      }
    }
  }
</style>