开发一个UI框架项目[10]-Pagination
本文最后更新于:2020年11月12日 晚上
设计细节
- 页码样式。页码不采用圆圈显示:当页码数值比较大时,有可能溢出圆圈,样式也并不好看。
- 页码显示。存在多于一页的情况时,页码显示第一页、当前页-2,**-1、当前页、当前页+1,+2、最后一页,重复则去重,中间未显示的页码用“…**”代替。
功能细节
页码去重。组件需要通过传入当前页码和总页码来计算出需要显示的页码,默认只展示第一页、当前页-2,-1、当前页、当前页+1,+2、最后一页。计算页码的过程需要去重,一开始是想使用ES6中的Set来去重,但为了兼顾到兼容性问题,因此使用将页码作为对象的键,最后遍历对象键的方式来去重:
1
2
3
4
5
6
7
8
9
10function unique (array) {
// ES6
// return [...new Set(array)]
const object = {}
array.map((number) => {
object[number] = true
})
return Object.keys(object).map((s) => parseInt(s, 10))
}因为对象的键都为字符串,所以还需要最后转为数值的一步。
页码显示。在对页码去重后,还需筛选出范围在1~totalPage的页码并排序,这时再遍历这个有序的页码数组,如果前后两个值不连续,说明页码是不连续的,再在中间加上“**…**”:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<script>
export default {
computed: {
pages() {
return unique([1, this.totalPage,
this.currentPage,
this.currentPage - 1, this.currentPage - 2,
this.currentPage + 1, this.currentPage + 2]
.filter((n) => n >= 1 && n <= this.totalPage)
.sort((a, b) => a - b))
.reduce((prev, current, index, array) => {
prev.push(current)
array[index + 1] !== undefined && array[index + 1] - array[index] > 1 && prev.push('...')
return prev
}, [])
}
}
}
</script>页码切换。页码切换处理起来很简单,给页码和前进后退按钮绑定点击事件,传入点击的页码或-1、+1,通过
$emit
提交更新的值和change
事件,父组件可通过.sync
或者监听change
事件来处理更新:1
2
3
4
5
6
7
8
9
10
11
12<script>
export default {
methods: {
onClickPage (n) {
if (n >= 1 && n <= this.totalPage) {
this.$emit('update:currentPage', n)
this.$emit('change', n)
}
}
}
}
</script>
人工测试
已完成。
vuepress设置
在docs/.vuepress/components文件夹下增加pagination-demo
vue文件,内容就是我们要展示的pagination
示例,然后在docs/components文件夹下增加pagination
的md文件,内容就是放置整个pagination
组件说明。
具体内容请访问这里。
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!