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
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值