简介
pagination_vue 是一个基于 Vue.js 的分页组件，可用于 web 应用程序中的分页显示。
安装
使用 npm 进行安装：
npm install pagination_vue
使用
基本用法
在 Vue.js 应用程序中引入组件：
import Vue from 'vue' import PaginationVue from 'pagination_vue' Vue.use(PaginationVue)
在模板中使用：
<pagination-vue :total="100" :page-size="10" :page="1" @pagination-change="onPageChange" />
在 methods 中实现 onPageChange() 函数以接收分页改变事件：
methods: {
onPageChange (page) {
console.info('当前页：', page)
}
}可选属性
pagination_vue 还提供了可选属性：
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| total | Number | 0 | 数据总数 |
| page-size | Number | 20 | 每页显示的数据条数 |
| page | Number | 1 | 当前页数 |
| show-total | Boolean | true | 是否显示总数 |
| show-jump | Boolean | true | 是否显示跳转框 |
| show-prev-next | Boolean | true | 是否显示上一页和下一页按钮 |
| show-first-last | Boolean | false | 是否显示首页和末页按钮 |
| total-text | String | '共 %d 条数据' | 总数格式化字符串，%s 将被替换为数据总数 |
| prev-text | String | '上一页' | 上一页按钮的文字 |
| next-text | String | '下一页' | 下一页按钮的文字 |
| first-text | String | '首页' | 首页按钮的文字 |
| last-text | String | '末页' | 末页按钮的文字 |
| disabled-class | String | 'disabled' | 禁用状态的 class 名称 |
| active-class | String | 'active' | 当前页的 class 名称 |
| wrapper-class | String | '' | 组件容器的 class 名称 |
示例
设置属性：
-- -------------------- ---- ------- --------------- ------------- --------------- --------- ------------------ ----------------------- ---------------- -- ----- ------------------ ------------------ ------------------- ------------------- ---------------------------- ------------------------ ----------------------------- --
结语
pagination_vue 提供了一个易于使用的分页组件，可以大大简化前端开发中的分页功能实现。在实际使用中，可根据需要选择不同的属性配置以满足业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d9081e8991b448db510