如何實(shí)現(xiàn)vue3封裝自己的分頁(yè)組件

本篇內(nèi)容主要講解“如何實(shí)現(xiàn)vue3封裝自己的分頁(yè)組件”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何實(shí)現(xiàn)vue3封裝自己的分頁(yè)組件”吧!

背景

在瀏覽列表類型的數(shù)據(jù)的時(shí)候，如果數(shù)據(jù)比較多一次性全部請(qǐng)求會(huì)出現(xiàn)性能損耗以及加載延遲等問(wèn)題，那么此時(shí)分頁(yè)組件就起到了關(guān)鍵作用，它可以只請(qǐng)求一部分?jǐn)?shù)據(jù)，也不會(huì)占用太多的頁(yè)面空間，想看別的數(shù)據(jù)可以通過(guò)頁(yè)碼的改變來(lái)發(fā)起請(qǐng)求，刷新頁(yè)面數(shù)據(jù)

現(xiàn)在我們自己來(lái)封裝分頁(yè)組件

組件所需參數(shù)

• total 屬性 ：用來(lái)傳遞數(shù)據(jù)總條數(shù)

• pagesize 屬性 ：每頁(yè)展示幾條數(shù)據(jù)

• currentPage 屬性 ：當(dāng)前默認(rèn)頁(yè)碼

• change-page 事件 ：頁(yè)碼改變時(shí)觸發(fā)的事件，參數(shù)為當(dāng)前頁(yè)碼

組件落地代碼my-pagination.vue

<template>
  <div class="my-pagination">
    <a href="javascript:;" :class="{ disabled: currentPage === 1 }" @click="changePage(false)">上一頁(yè)</a>
    <span v-if="currentPage > 3">...</span>
    <a
      href="javascript:;" 
      v-for="item in list"
      :key="item"
      :class="{ active: currentPage === item }"
      @click="changePage(item)"
      >{{ item }}</a
    >
    <span v-if="currentPage < pages - 2">...</span>
    <a href="javascript:;" :class="{ disabled: currentPage === pages }" @click="changePage(true)">下一頁(yè)</a>
  </div>
</template>
<script>
import { computed, ref } from 'vue-demi'
export default {
  name: 'MyPagination',
  props: {
    total: {
      type: Number,
      default: 80
    },
    pagesize: {
      type: Number,
      default: 10
    }
  },
  setup(props, { emit, attrs }) {
    // 當(dāng)前頁(yè)
    const currentPage = ref(attrs.currentPage)
    // 計(jì)算總頁(yè)數(shù)
    const pages = computed(() => Math.ceil(props.total / props.pagesize))
    // 頁(yè)碼顯示組合
    const list = computed(() => {
      const result = []
      // 總頁(yè)數(shù)小于等于5頁(yè)的時(shí)候
      if (pages <= 5) {
        for (let i = 1; i <= pages; i++) {
          result.push(i)
        }
      } else {
        // 總頁(yè)數(shù)大于5頁(yè)的時(shí)候
        // 控制兩個(gè)極端那邊的省略號(hào)的有無(wú)，頁(yè)碼的顯示個(gè)數(shù)與選中頁(yè)碼居中
        if (currentPage.value <= 2) {
          for (let i = 1; i <= 5; i++) {
            result.push(i)
          }
        } else if (currentPage.value >= 3 && currentPage.value <= pages.value - 2) {
          for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
            result.push(i)
          }
        } else if (currentPage.value > pages.value - 2) {
          for (let i = pages.value - 4; i <= pages.value; i++) {
            result.push(i)
          }
        }
      }
      return result
    })
    // 點(diǎn)擊上一頁(yè)下一頁(yè)頁(yè)碼改變頁(yè)碼
    const changePage = type => {
      // 點(diǎn)擊上一頁(yè)按鈕
      if (type === false) {
        if (currentPage.value <= 1) return
        currentPage.value -= 1
      } else if (type === true) {
        // 點(diǎn)擊下一頁(yè)按鈕
        if (currentPage.value >= pages.value) return
        currentPage.value += 1
      } else {
        // 點(diǎn)擊頁(yè)碼
        currentPage.value = type
      }
      // 傳給父組件當(dāng)前頁(yè)碼，可以在該事件中做相關(guān)操作
      emit('change-page', currentPage.value)
    }
    return { currentPage, pages, list, changePage }
  }
}
</script>
<style scoped lang="less">
.my-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: @xtxColor;
    }
    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: #333;
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>

使用組件

<XtxPagination 
:total="total" 
:pagesize="reqParams.pagesize" 
:currentPage="1" 
@change-page="changePage" />

效果

到此，相信大家對(duì)“如何實(shí)現(xiàn)vue3封裝自己的分頁(yè)組件”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！