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