• Vue3手写分页器

    在学习电商项目时，有一个手写分页器的功能模块，但是使用Vue2实现的，所以用Vue3尝试着写了一个。

    首先，有四个点要了解

    1）分页器展示，需要哪些数据（条件）？

    • 当前是第几个： pageNo字段表示当前页数

    • 每一页需要展示多少条数据：pageSize字段

    • 整个分页器一共有多少条数据： total字段 —— 【一共多少页： total/pageSize，向上取整】

    • 分页器连续页码个数，一般是5或者7： continues字段

    2）自定义分页器，在开发的时候先自己传递假的数据进行调试，调试成功再用服务器数据

    3）对于分页器而言，很重要的一个地方是 【算出：连续页码起始数字和结束数字】

    当前如果是第8页且连续页码数为5，则为 6 7 8 9 10。但还需要兼顾到特殊情况（如起始页不能小于1，结束页不能超过总页数，以及连续页码数必须要小于总页数），否则就要特别的赋值

    4）分页器动态展示

    v-for： 可以遍历 数组｜数字｜字符串｜对象

     

    然后开始正式写代码。分页器的组件名为PaginationIndex，在搜索页SearchIndex使用该组件。

     

    静态页面

    首先，找一个分页器的静态界面，先把它展示出来，之后再做各功能的添加

    1. <template>
    2.   <div class="pagination">
    3.     <button>1</button>
    4.     <button>上一页</button>
    5.     <button>···</button>
    6.  
    7.     <button>3</button>
    8.     <button>4</button>
    9.     <button>5</button>
    10.     <button>6</button>
    11.     <button>7</button>
    12.     
    13.     <button>···</button>
    14.     <button>9</button>
    15.     <button>上一页</button>
    16.     
    17.     <button style="margin-left: 30px">共 60 条</button>
    18.   </div>
    19. </template>
    20.  
    21. <script>
    22.   export default {
    23.     name: "PaginationIndex",
    24.   }
    25. </script>
    26.  
    27. <style lang="less" scoped>
    28.   .pagination {
    29.     button {
    30.       margin: 0 5px;
    31.       background-color: #f4f4f5;
    32.       color: #606266;
    33.       outline: none;
    34.       border-radius: 2px;
    35.       padding: 0 4px;
    36.       vertical-align: top;
    37.       display: inline-block;
    38.       font-size: 13px;
    39.       min-width: 35.5px;
    40.       height: 28px;
    41.       line-height: 28px;
    42.       cursor: pointer;
    43.       box-sizing: border-box;
    44.       text-align: center;
    45.       border: 0;
    46.  
    47.       &[disabled] {
    48.         color: #c0c4cc;
    49.         cursor: not-allowed;
    50.       }
    51.  
    52.       &.active {
    53.         cursor: not-allowed;
    54.         background-color: #409eff;
    55.         color: #fff;
    56.       }
    57.     }
    58.   }
    59. </style>

     因为数据，页数都是自己写死的，所以接下来需要获得我们真正所需要的数据（需要从父组件中传过来）

     SearchIndex中使用该组件时，传递相应的值

    1.            
    2.           <PaginationIndex
    3.             :pageNo="1"
    4.             :pageSize="10"
    5.             :total="91"
    6.             :continues="5"
    7.           />

    父元素给子元素传递数据，这里采用props接收。 子组件中

    1. export default {
    2.   name: "PaginationIndex",
    3.   props: ["pageNo", "pageSize", "total", "continues"],

    分页器起始与结束——计算属性

    同时，应该根据pageNo（当前所在页），计算出它的前后连续页（这里因为continues=5，也就是前后连续5页）。这里使用计算属性，分别用了两种方法。

    这里的计算属性因为自己用的不是很熟练，可能写的有点繁琐或者不太对的地方，有问题的地方大佬看到了可以教教我。

    1. setup(props, context) {
    2.     const PageInfo = reactive({});
    3.  
    4.     // 总共多少页
    5.     (PageInfo.totalPage = computed({
    6.       get() {
    7.         return Math.ceil(props.total / props.pageSize);
    8.       },
    9.     })),
    10.       // 计算出连续的页码的起始数字和结束数字【最少5页】
    11.       (PageInfo.startNumAndEndNum = computed(() => {
    12.         const { pageNo, pageSize, total, continues } = props;
    13.         // 定义两个变量，存储起始与结束 数字
    14.         let start = 0;
    15.         let end = 0;
    16.         // 连续页码数字5 【至少为5页】，如果没有5页
    17.         if (continues > PageInfo.totalPage) {
    18.           start = 1;
    19.           end = PageInfo.totalPage;
    20.         } else {
    21.           // 总页数 > 连续页数
    22.           start = pageNo - Math.floor(continues / 2);
    23.           end = start + continues - 1;
    24.           // 把不正常的现象纠正，比如start小于1，或者end超过total了
    25.           if (start < 1) {
    26.             start = 1;
    27.             end = continues;
    28.           }
    29.           if (end > PageInfo.totalPage) {
    30.             end = PageInfo.totalPage;
    31.             start = PageInfo.totalPage - continues + 1;
    32.           }
    33.         }
    34.         return { start, end };
    35.       }));

    计算连续页数这里要考虑算法健壮性，比如连续页码数比总页数还大的情况，或者通过计算后，连续起始页小于1，连续结束页大于总页数。 这里返回以对象形式返回

    不仅如此，还要考虑到如果起始页为1，上一页功能应该禁用，结束页到底了，下一页按钮也要禁用。还有如果起始页为2，1后面的省略号就不需要了。 

    DOM结构的代码如下：

    1. <template>
    2.   <div class="pagination">
    3.     <button :disabled="pageNo == 1">
    4.       上一页
    5.     button>
    6.     <button
    7.       v-show="PageInfo.startNumAndEndNum.start > 1"
    8.     >
    9.       1
    10.     button>
    11.  
    12.     <button v-if="PageInfo.startNumAndEndNum.start > 2">···button>
    13.  
    14.     <button
    15.       v-for="(page, index) in continues"
    16.       :key="index"
    17.     >
    18.       {{ page + PageInfo.startNumAndEndNum.start - 1 }}
    19.     button>
    20.  
    21.     <button v-if="PageInfo.startNumAndEndNum.end < PageInfo.totalPage - 1">
    22.       ···
    23.     button>
    24.     <button
    25.       v-show="PageInfo.startNumAndEndNum.end < PageInfo.totalPage"
    26.     >
    27.       {{ PageInfo.totalPage }}
    28.     button>
    29.     <button :disabled="pageNo == PageInfo.totalPage">下一页button>
    30.  
    31.     <button style="margin-left: 30px">共 {{ total }} 条button>
    32.   div>
    33. template>

     这里和vue2里有个小区别就是，vue2中之前的代码里 v-for循环展示中间连续页时，v-for和v-if一起用的。v-for可以循环遍历数字，所以vue2里面是v-for的结束页，假设结束页是10，也就是连续页码为6 7 8 9 10,v-for="(page,index) in PageInfo.startNumAndEndNum.end",这里就会遍历10次，vue2中的做法是，加上v-if判断，只保留后面的5次。但是vue3里面v-for和v-if没法放一起用。所以我的想法是，要么外面包一层div，给外层div加上v-if。我这就是采用v-for 连续页数。也就是只遍历5次，page就是从1-5，然后展示的时候只需要page + 起始页 - 1即为对应的连续页。

     分页器动态展示

    将分页器按照需求改好后，页面部分就算是差不多了，接下来需要点击相应的页码，进行相应数据的改动以及重新发送请求。这里就涉及到子组件给父组件传递数据，所以采用自定义事件。

    vue3中自定义事件相关的记录写在了下面这个博客里

    https://blog.csdn.net/m0_56698268/article/details/126578810

     中间等等过程就先不写了。最后放上分页器组件的代码

    PaginationIndex.vue

    1. <template>
    2.   <div class="pagination">
    3.     <button :disabled="pageNo == 1" @click="getPageNo(pageNo - 1)">
    4.       上一页
    5.     button>
    6.     <button
    7.       v-show="PageInfo.startNumAndEndNum.start > 1"
    8.       @click="getPageNo(1)"
    9.       :class="{ active: pageNo == 1 }"
    10.     >
    11.       1
    12.     button>
    13.  
    14.     <button v-if="PageInfo.startNumAndEndNum.start > 2">···button>
    15.  
    16.     <button
    17.       v-for="(page, index) in continues"
    18.       :key="index"
    19.       @click="getPageNo(page + PageInfo.startNumAndEndNum.start - 1)"
    20.       :class="{ active: pageNo == page + PageInfo.startNumAndEndNum.start - 1 }"
    21.     >
    22.       {{ page + PageInfo.startNumAndEndNum.start - 1 }}
    23.     button>
    24.  
    25.     <button v-if="PageInfo.startNumAndEndNum.end < PageInfo.totalPage - 1">
    26.       ···
    27.     button>
    28.     <button
    29.       v-show="PageInfo.startNumAndEndNum.end < PageInfo.totalPage"
    30.       @click="getPageNo(PageInfo.totalPage)"
    31.       :class="{ active: pageNo == PageInfo.totalPage }"
    32.     >
    33.       {{ PageInfo.totalPage }}
    34.     button>
    35.     <button :disabled="pageNo == PageInfo.totalPage">下一页button>
    36.  
    37.     <button style="margin-left: 30px">共 {{ total }} 条button>
    38.   div>
    39. template>
    40.  
    41. <script>
    42. import { computed, reactive } from "vue";
    43.  
    44. export default {
    45.   name: "PaginationIndex",
    46.   props: ["pageNo", "pageSize", "total", "continues"],
    47.   emits: ["getPageNo"],
    48.   setup(props, context) {
    49.     const PageInfo = reactive({});
    50.  
    51.     // 总共多少页
    52.     (PageInfo.totalPage = computed({
    53.       get() {
    54.         return Math.ceil(props.total / props.pageSize);
    55.       },
    56.     })),
    57.       // 计算出连续的页码的起始数字和结束数字【最少5页】
    58.       (PageInfo.startNumAndEndNum = computed(() => {
    59.         const { pageNo, pageSize, total, continues } = props;
    60.         // 定义两个变量，存储起始与结束 数字
    61.         let start = 0;
    62.         let end = 0;
    63.         // 连续页码数字5 【至少为5页】，如果没有5页
    64.         if (continues > PageInfo.totalPage) {
    65.           start = 1;
    66.           end = PageInfo.totalPage;
    67.         } else {
    68.           // 总页数 > 连续页数
    69.           start = pageNo - Math.floor(continues / 2);
    70.           end = start + continues - 1;
    71.           // 把不正常的现象纠正，比如start小于1，或者end超过total了
    72.           if (start < 1) {
    73.             start = 1;
    74.             end = continues;
    75.           }
    76.           if (end > PageInfo.totalPage) {
    77.             end = PageInfo.totalPage;
    78.             start = PageInfo.totalPage - continues + 1;
    79.           }
    80.         }
    81.         return { start, end };
    82.       }));
    83.     function getPageNo(pageNo) {
    84.       context.emit("getPageNo", pageNo);
    85.     }
    86.     return {
    87.       PageInfo,
    88.       getPageNo,
    89.     };
    90.   },
    91. };
    92. script>
    93.  
    94. <style lang="less" scoped>
    95. .pagination {
    96.   text-align: center;
    97.   button {
    98.     margin: 0 5px;
    99.     background-color: #f4f4f5;
    100.     color: #606266;
    101.     outline: none;
    102.     border-radius: 2px;
    103.     padding: 0 4px;
    104.     vertical-align: top;
    105.     display: inline-block;
    106.     font-size: 13px;
    107.     min-width: 35.5px;
    108.     height: 28px;
    109.     line-height: 28px;
    110.     cursor: pointer;
    111.     box-sizing: border-box;
    112.     text-align: center;
    113.     border: 0;
    114.  
    115.     &[disabled] {
    116.       color: #c0c4cc;
    117.       cursor: not-allowed;
    118.     }
    119.  
    120.     &.active {
    121.       cursor: not-allowed;
    122.       background-color: #409eff;
    123.       color: #fff;
    124.     }
    125.   }
    126. }
    127. .active {
    128.   background-color: skyblue;
    129. }
    130. style>

    父组件 SearchIndex.vue

    1. DOM
    2.         
    3.           <PaginationIndex
    4.             :pageNo="searchParams.pageNo"
    5.             :pageSize="searchParams.pageSize"
    6.             :total="total"
    7.             :continues="5"
    8.             @getPageNo="getPageNo"
    9.           />
    10.  
    11. JS
    12. export default {
    13.   name: "SearchIndex",
    14.   components: {
    15.     SearchSelector,
    16.   },
    17.   setup() {
    18.     const store = useStore();
    19.     const $route = useRoute();
    20.     const $router = useRouter();
    21.     const internalInstance = getCurrentInstance();
    22.     const $bus = internalInstance.appContext.config.globalProperties.$bus;
    23.     // 带给服务器的参数
    24.     const searchParams = reactive({
    25.       // 一级分类id
    26.       category1Id: "",
    27.       // 二级分类id
    28.       category2Id: "",
    29.       // 三级分类id
    30.       category3Id: "",
    31.       // 分类名字
    32.       categoryName: "",
    33.       // 关键字
    34.       keyword: "",
    35.       // 排序 : 初始状态应该是综合|降序
    36.       order: "1:desc",
    37.       // 分页器
    38.       pageNo: 1,
    39.       // 每页展示数据个数
    40.       pageSize: 10,
    41.       // 平台售卖属性操作带的参数
    42.       props: [],
    43.       // 品牌
    44.       trademark: "",
    45.     });
    46.     let total = computed({
    47.       get() {
    48.         return store.state.search.searchList.total;
    49.       },
    50.     });
    51.     // 自定义事件回调——获取当前第几页
    52.     function getPageNo(pageNo) {
    53.       // console.log("getPageNo", pageNo);
    54.       // 整理带给服务器参数
    55.       searchParams.pageNo = pageNo;
    56.       getData();
    57.     }

     

     

  • 相关阅读:
    .NET开源强大、易于使用的缓存框架 - FusionCache
    并发编程中的锁、条件变量和信号量
    [学习记录] SpringBoot 4. 开发技巧
    vue+Select+Tree实现单选 默认选中全部
    Kotlin学习笔记（六）作用域函数run,with, apply,also,let,takeIf,takeUnless,repeat
    王道考研操作系统——I/O管理
    java基础知识点总结，零基础怎么学Java？
    Python和Java应该如何选择？该怎么学？
    shardingJdbc分库分表实战
    【Qt】【模型视图架构】 在项目视图中启用拖放
  • 原文地址：https://blog.csdn.net/m0_56698268/article/details/126644677