由Web组件所建的页码组件 .
安装
bun add @duskmoon-dev/el-pagination
使用量
自动注册
import '@duskmoon-dev/el-pagination/register';
<el-dm-pagination total="100" current="1"></el-dm-pagination>
手工登记
import { ElDmPagination, register } from '@duskmoon-dev/el-pagination';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-pagination', ElDmPagination);
大小
| 大小 | 说明 |
|---|
sm | 小的页点 |
md | 中度页标( 默认) |
lg | 大型贴花 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
total | number | 0 | 总页数 |
current | number | 1 | 当前页码 |
siblings | number | 1 | 当前两侧显示的页面 |
boundaries | number | 1 | 开始/结束时显示的页面 |
size | string | 'md' | 大小 : sm, (中文(简体) ), md, (中文(简体) ), lg |
color | string | 'primary' | 颜色变体 |
CSS 组件
| 编 | 说明 |
|---|
container | 贴花容器 |
button | 所有页面按钮 |
page | 页码按钮 |
ellipsis | 椭圆元素 |
活动
| 活动 | 细节 | 说明 |
|---|
change | { page } | 当页面更改时被解除 |
实例
基础
<el-dm-pagination total="10" current="1"></el-dm-pagination>
许多页
<el-dm-pagination total="100" current="50"></el-dm-pagination>
自定义兄弟姐妹
<el-dm-pagination total="20" siblings="2"></el-dm-pagination>
自定义边界
<el-dm-pagination total="20" boundaries="2"></el-dm-pagination>
大小
<el-dm-pagination total="10" size="sm"></el-dm-pagination>
<el-dm-pagination total="10" size="md"></el-dm-pagination>
<el-dm-pagination total="10" size="lg"></el-dm-pagination>
处理页面更改
const pagination = document.querySelector('el-dm-pagination');
pagination.addEventListener('change', (e) => {
console.log('Page changed to:', e.detail.page);
// Fetch data for the new page
fetchData(e.detail.page);
});
带有数据表
<el-dm-table id="table"></el-dm-table>
<el-dm-pagination id="pagination" total="10"></el-dm-pagination>
<script>
const table = document.querySelector('#table');
const pagination = document.querySelector('#pagination');
pagination.addEventListener('change', async (e) => {
const data = await fetchPageData(e.detail.page);
table.data = data;
});
</script>
许可证
麻省理工学院