ea-ui

Pagination 分页 ​

当数据量过多时，使用分页分解数据。

引入 ​

js

js
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-pagination/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

需要设置total属性来设置数据总数。可以设置layout属性来控制显示的内容。

可以利用change事件监听当前页码的变化。

查看代码
html
<div class="col left">
  <ea-pagination layout="prev,pager,next" total="60"></ea-pagination>
  <ea-pagination layout="prev,pager,next" total="200"></ea-pagination>
</div>

当只显示前后按钮时，也可以通过change事件监听当前页码的变化。

查看代码

html

html
<div class="col left">
  <ea-pagination id="prevAndNext" layout="prev,next" total="80"></ea-pagination>
</div>

js

js
document.querySelector("#prevAndNext").addEventListener("change", function (e) {
  alert(`当前页码为: ${e.detail.currentPage}`);
});

设置最大页码按钮数 ​

通过设置page-count属性来设置最大页码按钮数。

查看代码

html

html
<div class="col left">
  <ea-pagination
    layout="prev,pager,next"
    total="60"
    page-count="10"
  ></ea-pagination>
  <ea-pagination
    layout="prev,pager,next"
    total="200"
    page-count="10"
  ></ea-pagination>
</div>

带有背景色的分页 ​

通过设置background属性来设置背景色。

查看代码
html
<div class="col left">
  <ea-pagination
    background
    layout="prev,pager,next"
    total="200"
  ></ea-pagination>
</div>

附加功能 ​

根据场景需要，可以添加其他功能模块。

查看代码
html
<div class="col left">
  <section>显示总数</section>
  <ea-pagination
    background
    layout="total,prev,pager,next"
    total="200"
  ></ea-pagination>
</div>

Attributes ​

参数说明类型可选值默认值
total总数number-0
page-count最大页码按钮数number-7
layout显示的内容string-prev,pager,next
background显示背景色boolean-false
page-size每页显示条数number-10
pager-count页码按钮的数量number-7

CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container外层容器
item-wrap页码按钮容器 (仅在layout属性中包含pager时生效)
arrow箭头按钮 (仅在layout属性中包含prev或next时生效)
total-wrap总数容器 (仅在layout属性中包含total时生效)
page-item页码按钮 (仅在layout属性中包含pager时生效)
more-item省略页码按钮 (仅在layout属性中包含pager时生效)

Events ​

事件名称说明回调参数
change页码改变时触发