介绍

用于分割长列表，每次加载一页数据。

引入

import Pagination from 'sard-uniapp/components/pagination/pagination.vue'

代码演示

基础使用

设置 total 属性后便会渲染出页码。

vue lang="ts"

<template>
  <sar-pagination :total="100" v-model:current="current" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(1)
</script>

vue lang="js"

<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 lang="ts"

<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 lang="js"

<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 lang="ts"

<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 lang="js"

<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 lang="ts"

<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 lang="js"

<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 变量

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);
}