Vue3实现Pagination分页组件（二）分页操作控件

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

写在前面

在 B 端的 web 开发中，分页组件或者叫分页器，是较为常用的控件之一，通常配合表格或列表，实现数据量大的情况下，分页拆解数据的功能。

由于完整实现的篇幅较大，所以我分成了以下几部分逐个讲解，这里是第二讲：分页操作控件，如果你需要查看完整的源代码实现，请访问Pagination 分页组件

基础实现
分页操作控件
自定义控件布局
限制最大页码数

分页控件

一个完整的分页组件包含有各种用于操作或展示的控件，包括prev 上一页、next-下一页、pager-页码、jumper-输入跳转、sizes-每页条数选择器、total-总条数；

为了方便下一讲的自定义空间布局，这里采用将每个基础控件抽离成单独的 Vue 组件进行维护。

Prev & Next 上下翻页

「上一页」和「下一页」这两个基础控件大致相同，通过不同的type区分，如果可以，你还可以自定义传入自定义文本替换上下翻页的图标。大致实现如下（Prev）

<template>
    <li :class="className" @click="onClick"> <span v-if="text" class="page-text" v-text="text"></span> <i v-else class="page-icon ri-arrow-left-s-line"></i> </li>
</template>
<script setup> import { defineProps, defineEmits, computed } from "vue"; const props = defineProps({ text: { type: String, default: "" }, disabled: { type: Boolean, default: false }, }); const emit = defineEmits(["click"]); const className = computed(() => { let name = ["bp-page-item", "bp-prev-page", { "page-item-disabled": props.disabled }]; return name; }); const onClick = () => { if (props.disabled) return; emit("click", "prev"); }; </script>

<script> export default { name: "bp-pagination-prev" }; </script>

这里需要注意按钮的disabled属性，当页码处于首页或尾页时，对应的翻页按钮需要做不可点击处理。在父组件中，通过事件触发上一讲实现的核心方法。

<prev @click="setCurrentPage"></prev>

Pager 页码跳转

在正常情况下，页码跳转与上下翻页的功能一致，只是切换的页码是一个确定的值，而非当前页加一或者减一。但如果页数较多的话，需要将超出的页数做折叠/省略处理，这里的实现放到最后面细说。

Jumper 输入跳转

Jumper组件接受一个来自输入框的值，并执行和Pager一致的处理逻辑，相对于页码跳转，Jumper可以直达某些被折叠的页码。此外，输入框两侧可以自定义一些提示文案，例如「跳转」-「页」，可以接收一个模板字符串，并对其拆分、替换内容处理：

const props = defineProps({
    tmpString: { type: String, default: "跳至{jumper}页" }
});

const paramsStr = "{jumper}";
const jumperText = reactive({ prefix: "", suffix: "" });

watchEffect(() => {
    const str = props.tmpString.split(paramsStr);
    if (str.length > 1) {
        jumperText.prefix = str[0];
        jumperText.suffix = str[1];
    }
});

欢迎阅读其它文章

今天的文章Vue3实现Pagination分页组件（二）分页操作控件分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/14789.html