介绍
用于分割长列表,每次加载一页数据。
引入
js
import Pagination from 'sard-uniapp/components/pagination/pagination.vue'代码演示
基础使用
设置 total 属性后便会渲染出页码。
vue
<template>
<sar-pagination :total="100" v-model:current="current" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const current = ref(1)
</script>vue
<template>
<sar-pagination :total="100" v-model:current="current" />
</template>
<script setup lang="js">
import { ref } from "vue";
const current = ref(1);
</script>显示省略号
设置 ellipsis 会显示省略号,默认点击省略号会向前或向后 5 页。
vue
<template>
<sar-pagination
:total="100"
:page-size="10"
ellipsis
v-model:current="current"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const current = ref(1)
</script>vue
<template>
<sar-pagination
:total="100"
:page-size="10"
ellipsis
v-model:current="current"
/>
</template>
<script setup lang="js">
import { ref } from "vue";
const current = ref(1);
</script>简单分页
设置 type="simple" 属性可以隐藏具体的页码。
vue
<template>
<sar-pagination
:total="43"
:page-size="10"
type="simple"
v-model:current="current"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const current = ref(1)
</script>vue
<template>
<sar-pagination
:total="43"
:page-size="10"
type="simple"
v-model:current="current"
/>
</template>
<script setup lang="js">
import { ref } from "vue";
const current = ref(1);
</script>自定义
自定义前后按钮内容。
vue
<template>
<sar-pagination :total="100" :page-size="10" v-model:current="current">
<template #prev>
<sar-icon name="left" />
</template>
<template #next>
<sar-icon name="right" />
</template>
</sar-pagination>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const current = ref(1)
</script>vue
<template>
<sar-pagination :total="100" :page-size="10" v-model:current="current">
<template #prev>
<sar-icon name="left" />
</template>
<template #next>
<sar-icon name="right" />
</template>
</sar-pagination>
</template>
<script setup lang="js">
import { ref } from "vue";
const current = ref(1);
</script>API
PaginationProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| total | 总记录数 | number | 0 |
| page-size | 每页记录数 | number | 10 |
| current (v-model) | 当前页码 | number | - |
| page-count | 总页数,默认自动计算 | number | - |
| page-button-count | 显示的页码按钮个数 | number | 5 |
| hide-on-single-page | 只有一页时是否隐藏分页 | boolean | false |
| type | 分页类型 | 'simple' | 'multi' | 'multi' |
| ellipsis | 是否显示省略号 | boolean | false |
| multi-count | 点击省略号跳转的页数 | number | 5 |
PaginationSlots
| 插槽 | 描述 | 属性 |
|---|---|---|
| prev | 自定义上一页按钮内容 | - |
| next | 自定义下一页按钮内容 | - |
PaginationEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| update:current | 页码改变时触发 | (page: number) => void |
| change 1.12.2+ | 页码改变时触发 | (page: number) => void |
主题定制
CSS 变量
scss
page,
.sar-portal {
--sar-pagination-border-radius: var(--sar-rounded);
--sar-pagination-border-color: var(--sar-border-color);
--sar-pagination-item-height: 40px;
--sar-pagination-item-min-width: 40px;
--sar-pagination-item-padding-x: 10px;
--sar-pagination-item-font-size: var(--sar-text-base);
--sar-pagination-item-color: var(--sar-primary);
--sar-pagination-item-active-bg: var(--sar-active-bg);
--sar-pagination-item-current-color: var(--sar-white);
--sar-pagination-item-current-border-color: var(--sar-primary);
--sar-pagination-item-current-bg: var(--sar-primary);
--sar-pagination-ratio-height: 40px;
--sar-pagination-ratio-font-size: var(--sar-text-base);
}