5.0 KiB
5.0 KiB
::: anchor :::
::: title 基本介绍 :::
::: describe 提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。 :::
::: title 基础使用 :::
::: demo 使用 lay-page 标签, 创建分页
:::
::: title 简单模式 :::
::: demo
<script> import { ref } from 'vue' export default { setup() { const limit = ref(20) const total = ref(100) return { limit, total } } } </script>:::
::: title 插槽使用 :::
::: demo
上 下 <script> import { ref } from 'vue' export default { setup() { const limit = ref(20) const total = ref(100) return { limit, total } } } </script>:::
::: title 不同主题 :::
::: demo
<script> import { ref } from 'vue' export default { setup() { const limit = ref(20) const total = ref(100) const showPage = ref(true) return { limit, total, showPage } } } </script>
:::
::: title 指定分页容量 :::
::: demo
<script> import { ref } from 'vue' export default { setup() { const limit = ref(20) const total = ref(100) return { limit, total } } } </script>:::
::: title 每页数量切换事件(limit) :::
::: demo
每页数量:{{limit}}
<script>
import { ref } from 'vue'
export default {
setup() {
const limit = ref(5)
const total = ref(9999)
const showLimit = ref(true)
return {
limit,
total,
showLimit,
}
}
}
</script>
:::
::: title 完整分页 :::
::: demo
每页数量:{{limit}} <script> import { ref } from 'vue' export default { setup() { const limit = ref(5) const total = ref(9999) const showCount = ref(true) const showPage = ref(true) const showLimit = ref(true) const showRefresh = ref(true) const showSkip = ref(true) return { limit, total, showCount, showPage, showLimit, showRefresh, showSkip } } } </script>:::
::: title 页码切换事件(jump) :::
::: demo
<script> import { ref } from 'vue' export default { setup() { const limit = ref(20) const total = ref(100) const showPage = ref(true) const jump = function({ current }) { console.log("当前页:" + current) } return { limit, total, jump, showPage } } } </script>:::
::: title Page 属性 :::
::: table
| 属性 | 描述 | 默认值 |
|---|---|---|
| limit | 每页数量 | -- |
| total | 总条数 | -- |
| showCount | 显示总数 | false |
| showPage | 显示每页 | false |
| showLimit | 显示每页数量 | false |
| showRefresh | 显示刷新按钮 | false |
| showSkip | 显示跳转 | false |
| pages | 显示切页按钮数量 | 10 |
| limits | 切换每页数量的选择项 | [10,20,30,40,50] |
:::
::: title Page 事件 :::
::: table
| 事件 | 描述 | 参数 |
|---|---|---|
| jump | 切换回调 | { current: 当前页面 } |
| limit | 每页数量变化 | 变化后的值 |
:::
::: title Page 插槽 :::
::: table
| 插槽 | 描述 | 默认值 |
|---|---|---|
| prev | 上一页 | 上一页 |
| next | 下一页 | 下一页 |
:::
::: comment :::
::: previousNext page :::