Vue分頁(yè)組件如何封裝

今天小編給大家分享一下Vue分頁(yè)組件如何封裝的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

效果如圖

話不多說(shuō)，直接上代碼

<template>
  <div class="pagination">
    <!-- 總頁(yè)數(shù) -->
    <div class="total">共{{ total }}條</div>
    <!-- 選擇每頁(yè)的條數(shù) -->
    <select name="" id="size_select" v-model="sizes" @change="sizeChange">
      <option v-for="item in pageSizes" :key="item" :value="item">
        {{ item }}條/頁(yè)
      </option>
    </select>
    <div class="pagenum">
      <!-- 上一頁(yè) -->
      <el-button
        icon="el-icon-arrow-left"
        :disabled="backDisabled"
        circle
        @click="back"
      ></el-button>
      <!-- 頁(yè)碼 -->
      <ul>
        <li
          :class="currentPage == item ? 'active' : ''"
          v-for="(item, index) in pagenum"
          :key="index"
          @click="toPage(item)"
        >
          {{ item }}
        </li>
      </ul>
      <!-- 下一頁(yè) -->
      <el-button
        icon="el-icon-arrow-right"
        :disabled="forwardDisabled"
        circle
        @click="forward"
      ></el-button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "pagination",
  props: {
    total: {  // 總數(shù)
      type: null,
      required: true,
    },
    pageSizes: { // 可選擇的每頁(yè)條數(shù)
      type: Array,
    },
    pageSize: {  // 每頁(yè)顯示的條數(shù)
      type: Number,
      required: true,
    },
    currentPage: { // 當(dāng)前頁(yè)
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      sizes: this.pageSize,  // 接收props傳來(lái)的pageSize
      nowPage: this.currentPage,  // 接收props傳來(lái)的currentPage
    };
  },
  computed: {
    allPage() {  // 計(jì)算所有的頁(yè)數(shù)
      return Math.ceil(this.total / this.pageSize);
    },
    backDisabled() {  // 是否禁用上一頁(yè)
      return this.currentPage == 1;
    },
    forwardDisabled() { // 是否禁用下一頁(yè)
      return this.currentPage == this.allPage;
    },
    pagenum() {   // 計(jì)算顯示不同的頁(yè)
      if (this.allPage - this.nowPage > 6) {  //  
        if (this.nowPage > 6) {
          return [
            1,
            "...",
            this.nowPage - 2,
            this.nowPage - 1,
            this.nowPage,
            this.nowPage + 1,
            this.nowPage + 2,
            "...",
            this.allPage,
          ];
        } else {
          if (this.allPage > 8) {
            return [1, 2, 3, 4, 5, 6, "...", this.allPage];
          } else {
            return this.allPage;
          }
        }
      } else {
        if (this.nowPage < 6) {
          return this.allPage;
        } else {
          return [
            1,
            "...",
            this.allPage - 5,
            this.allPage - 4,
            this.allPage - 3,
            this.allPage - 2,
            this.allPage - 1,
            this.allPage,
          ];
        }
      }
    },
  },
  methods: {
    sizeChange() {  // 每頁(yè)限制條數(shù)改變觸發(fā)事件
      this.$emit("sizeChange", this.sizes);
    },
    forward() {  // 點(diǎn)擊下一頁(yè)
      this.$emit("currentChange", (this.nowPage += 1));
    },
    back() {  // 點(diǎn)擊上一頁(yè)
      this.$emit("currentChange", (this.nowPage -= 1));
    },
    toPage(val) {  // 點(diǎn)擊頁(yè)數(shù)
      if (val == "...") {
        console.log(2);
      } else {
        this.nowPage = val;
        this.$emit("currentChange", val);
      }
    },
  },
};
</script>

以上就是“Vue分頁(yè)組件如何封裝”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。