效果图:

image.png

初始结构:

  1. <template>
  2.   <div class="xtx-pagination">
  3.     <a href="javascript:;" class="disabled">上一页</a>
  4.     <span>...</span>
  5.     <a href="javascript:;" class="active">3</a>
  6.     <a href="javascript:;">4</a>
  7.     <a href="javascript:;">5</a>
  8.     <a href="javascript:;">6</a>
  9.     <a href="javascript:;">7</a>
  10.     <span>...</span>
  11.     <a href="javascript:;">下一页</a>
  12.   </div>
  13. </template>
  14. <script>
  15. export default {
  16.   name: 'XtxPagination'
  17. }
  18. </script>
  19. <style scoped lang="less">
  20. .xtx-pagination {
  21.   display: flex;
  22.   justify-content: center;
  23.   padding: 30px;
  24.   > a {
  25.     display: inline-block;
  26.     padding: 5px 10px;
  27.     border: 1px solid #e4e4e4;
  28.     border-radius: 4px;
  29.     margin-right: 10px;
  30.     &:hover {
  31.       color: @xtxColor;
  32.     }
  33.     &.active {
  34.       background: @xtxColor;
  35.       color: #fff;
  36.       border-color: @xtxColor;
  37.     }
  38.     &.disabled {
  39.       cursor: not-allowed;
  40.       opacity: 0.4;
  41.       &:hover {
  42.         color: #333
  43.       }
  44.     }
  45.   }
  46.   > span {
  47.     margin-right: 10px;
  48.   }
  49. }
  50. </style>

落地代码:

  1. <template>
  2.   <div class="xtx-pagination">
  3.     <a href="javascript:;" v-if="myCurrentPage===1" class="disabled">上一页</a>
  4.     <a href="javascript:;" v-else @click="go(-1)">上一页</a>
  5.     <!-- 如果起点按钮大于2就显示 -->
  6.     <span  v-if="pageInfo.start>2">...</span>
  7.     <a href="javascript:;" @click="changePage(item)"  :class="{active: myCurrentPage === item}" v-for="(item,idx) in pageInfo.pager" :key="idx"> {{item}} </a>
  8.     <!-- 如果当前终点按钮小于总页数就显示 当终点按钮是20总按钮也是20 就不显示 -->
  9.     <span  v-if="pageInfo.end < pageInfo.pageCount">...</span>
  10.     <!-- 如果当前按钮等于最后一页就禁止点击 disabled -->
  11.      <a href="javascript:;" v-if="myCurrentPage==pageInfo.end" class="disabled">下一页</a>
  12.      <a href="javascript:;" v-else @click="go(1)">下一页</a>
  13.   </div>
  14. </template>
  15. <script>
  16. import { computed, ref, watch } from 'vue'
  17. export default {
  18.   name: 'XtxPagination',
  19.   props: {
  20.     total: { type: Number, default: 100 },
  21.     pageSize: { type: Number, default: 10 },
  22.     currentPage: { type: Number, default: 1 },
  23.     btnCount: { type: Number, default: 5 }
  24.   },
  25.   setup (props, { emit }) {
  26.     const myTotal = ref(100) // 总条数
  27.     const myPageSize = ref(5) // 每页共几条
  29.     const myCurrentPage = ref(3) // 用户实时点击，修改
  31.     const myBtnCount = ref(5) // 分页按钮的个数5个
  33.     // 让当前的页码处于正中间
  34.     // const pager = ref([1, 2, 3, 4, 5])
  36.     // 根据上边信息，实时计算 pager，起始页码，结束页码
  37.     const pageInfo = computed(() => {
  38.       // 总页数 = 总条数/每页几条
  39.       const pageCount = Math.ceil(myTotal.value / myPageSize.value)
  41.       // 起点 = 当前页数-总页数/2  举例 3 - Math.floor(5/2)  = 1
  42.       let start = myCurrentPage.value - Math.floor((myBtnCount.value / 2))
  44.       // 终点 = 起点页数 + 总页数 - 1  距离 1 + 5 -1 || 3 + 5 -1
  45.       let end = start + myBtnCount.value - 1
  46.       // 意外1 当起点小于1
  47.       if (start < 1) {
  48.         start = 1
  49.         // 终点= 当前页数>总页数？总页数 否则 当前页数
  50.         end = myBtnCount.value > pageCount ? pageCount : myBtnCount.value
  51.       }
  53.       // 意外2  当终点大于最大页码
  54.       if (end > pageCount) {
  55.         end = pageCount
  56.         // 起点= 终点+（-所有页数+1）>1？1:= 终点+（-所有页数+1）
  57.         start = (end - myBtnCount.value + 1) < 1 ? 1 : (end - myBtnCount.value + 1)
  58.       }
  60.       const pager = []
  61.       for (let i = start; i <= end; i++) {
  62.         pager.push(i)
  63.       }
  64.       return { start, end, pageCount, pager }
  65.     })
  67.     // 上一页下一页
  68.     const go = (step) => {
  69.       myCurrentPage.value += step
  70.     }
  71.     const changePage = (page) => {
  72.       // 如果等于现在页页码 保持不动
  73.       if (page === myCurrentPage.value) return
  74.       myCurrentPage.value = page
  75.       emit('currentCahnge', page)
  76.     }
  78.     // 监听传入的值改变
  79.     watch(props, () => {
  80.       myTotal.value = props.total
  81.       myPageSize.value = props.pageSize
  82.       myCurrentPage.value = props.currentPage
  83.       myBtnCount.value = props.btnCount
  84.     }, { immediate: true })
  85.     return { myTotal, myPageSize, myCurrentPage, myBtnCount, pageInfo, go, changePage }
  86.   }
  87. }
  88. </script>
  89. <style scoped lang="less">
  90. .xtx-pagination {
  91.   display: flex;
  92.   justify-content: center;
  93.   padding: 30px;
  94.   > a {
  95.     display: inline-block;
  96.     padding: 5px 10px;
  97.     border: 1px solid #e4e4e4;
  98.     border-radius: 4px;
  99.     margin-right: 10px;
  100.     &:hover {
  101.       color: @xtxColor;
  102.     }
  103.     &.active {
  104.       background: @xtxColor;
  105.       color: #fff;
  106.       border-color: @xtxColor;
  107.     }
  108.     &.disabled {
  109.       cursor: not-allowed;
  110.       opacity: 0.4;
  111.       &:hover {
  112.         color: #333
  113.       }
  114.     }
  115.   }
  116.   > span {
  117.     margin-right: 10px;
  118.   }
  119. }
  120. </style>