本文例項為大家分享了3.0手動封裝分頁元件的具體程式碼，供大家參考，具體內容如下

1.父元件引入

src/views/goods/components/goods-comment.vue

<!-- page表示初始化分頁時，預設顯示第幾頁 -->
    <XtxPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='total' :page='1' />
    //調介面
 import {findCommentListByGoods } from '@/api/product.'
 export default{
  setup(){
  // 篩選條件準備
    const reqParams = reactive({
      // 當前頁碼
      page: 1,// 每頁的條數
      pageSize: 10,// 是否有圖片
      hasPicture: null,// 篩選條件
      tag: null,// 排序的欄位
      sortField: null
    })
    // 偵聽引數的變化
    watch(reqParams,() => {
   findCommentListByGoods(goods.value.id,reqParams).then(ret => {
        total.value = ret.result.counts
        list.value = ret.result.items
      })
    },{
      immediate: true
    })
    // 控制頁碼的變化
    const changePage = (page) => {
      // 修改分頁引數，重新呼叫介面即可
      reqParams.page = page
    }
    
  }
 }

2.子元件

src/components/library/xtx-pagination.vue

<template>
  <div class="xtx-pagination">
    <a @click='changePage(false)' href=":;" :class="{disabled: currentPage===1}">上一頁</a>
    <span v-if='currentPage > 3'>...</span>
    <a @click='changePage(item)' href="script:;" :class='{active: currentPage===item}' v-for='item in list' :key='item'>{{item}}</a>
    <span v-if='currentPage < pages - 2'>...</span>
    <a @click
 
='changePage(true)' href="javascript:;" :class='{disabled: currentPage===pages}'>下一頁</a>
  </div>
</template>
<script>
import { computed,ref } from 'vue'

export default {
  name: 'XtxPagination',props: {
    total: {
      type: Number,default: 80
    },pagesize: {
      type: Number,default: 10
    }
    // 預設初始頁碼
    // page: http://www.cppcns.com
 
{
    //   type: Number,//   default: 1
    // }
  },setup (props,{ emit,attrs }) {
    // attrs表示父元件傳遞的屬性，但是props沒有接收的屬性，這種屬性不是響應式的
    // 動態計算中期的頁碼資訊
    // 每頁的條數
    // const pagesize = 8
    // 總頁數
    let pages = Math.ceil(props.total / props.pagesize)
    // 當前頁碼
    // console.log(attrs.page)
    const currentPage = ref(attrs.page || 1)
    // 動態計算頁碼列表
    const list = computed(() => {
      // 當父元件傳遞total的值發生變化時，計算屬性會重新計算
      pages = Math.ceil(props.total / props.pagesize)
      const result = []
      // 總頁碼小於等於5；大於5
      if (pages <= 5) {
        // 總頁碼小於等於5的情況
        for (let i = 1; i <= pages; i++) {
          result.push(i)
        }
      } else {
      http://www.cppcns.com  // 總頁碼大於5
        if (currentPage.value <= 2) {
          // 左側臨界值
          for (let i = 1; i <= 5; i++) {
            result.push(i)
          }
        } else if (currentPage.value >= pages - 1) {
          // 右側臨界值
          for (let i = pages - 4; i <= pages; i++) {
            result.push(i)
          }
        } else {
          // 中間的狀態
          for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
            result.push(i)
          }
        }
      }
      return result
    })
    // 控制上一頁和下一頁變化
    const changePage = (type) => {
      if (type === false) {
        // 上一頁
        // 頁面是第一頁時，禁止點選操作
        if (currentPage.value === 1) return
        if (currentPage.value > 1) {
          currentPage.value -= 1
        }
      } else if (type === true) {
        // 下一頁
        // 頁面是最後頁時，禁止點選操作
        if (currentPage.value === pages) return
        if (currentPage.value < pages) {
          currentPage.value += 1
        }
      } else {
        // 點選頁碼
        currentPage.value = type
      }
      emit('change-page',currentPage.value)
    }
    return { list,currentPage,pages,changePage }
  }
}
</script>
<style scoped lang="less">
.xtx-pagination {
  www.cppcns.comdisplay: flex;
  justify-content: center;
  pwww.cppcns.comadding: 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>

知識點：attrs表示父元件傳遞的屬性，但是props沒有接收的屬性，這種屬性不是響應式的（vue3新增）

3.實現效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。