vue3封装自己的分页组件 vue3封装自己的分页组件

【vue3封装自己的分页组件】本文实例为大家分享了vue3封装自己分页组件的具体代码，供大家参考，具体内容如下
背景
在浏览列表类型的数据的时候，如果数据比较多一次性全部请求会出现性能损耗以及加载延迟等问题，那么此时分页组件就起到了关键作用，它可以只请求一部分数据，也不会占用太多的页面空间，想看别的数据可以通过页码的改变来发起请求，刷新页面数据
现在我们自己来封装分页组件
组件所需参数

total 属性：用来传递数据总条数
pagesize 属性：每页展示几条数据
currentPage 属性：当前默认页码
change-page 事件：页码改变时触发的事件，参数为当前页码

组件落地代码my-pagination.vue

.my-pagination {display: flex; justify-content: center; padding: 30px; > a {display: inline-block; padding: 5px 10px; border: 1px solid #e4e4e4; border-radius: 4px; margin-right: 10px; &:hover {color: @xtxColor; }&.active {background: @xtxColor; color: #fff; border-color: @xtxColor; }&.disabled {cursor: not-allowed; opacity: 0.4; &:hover {color: #333; }}}> span {margin-right: 10px; }}

使用组件

效果