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

转载自：Vue3实现Pagination分页组件（二）分页操作控件 - 掘金

写在前面

在 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];
    }
});
复制代码

作者：木亦Sam
链接：https://juejin.cn/post/7081722389834235940
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。