该组件用于分隔长列表，每次只加载一个页面。适用于数据量较大的场景，通过分页的方式提升用户体验和页面性能。

基本使用

最简单的用法，通过v-model绑定当前页码，设置total总记录数。

<template>
	<un-pagination v-model="currentPage" :total="100" :page-size="10" @change="pageChange"></un-pagination>
</template>

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

const currentPage = ref(1)

const pageChange = (page: number) => {
	console.log("当前页码:", page)
}
</script>

简单模式

通过设置simple为true，可以使用简单模式，只显示当前页数和总页数。

<un-pagination v-model="currentPage" :total="100" :page-size="10" simple></un-pagination>

自定义样式

可以通过相关属性自定义分页器的外观。

<un-pagination
	v-model="currentPage"
	:total="100"
	:page-size="10"
	bg-color="#f0f0f0"
	active-bg-color="#007aff"
	active-color="#ffffff"
	color="#333333"
	round="8px"
	item-width="36px"
	item-height="36px"
></un-pagination>

自定义按钮文字

可以自定义上一页和下一页按钮的文字。

<un-pagination v-model="currentPage" :total="100" :page-size="10" prev-text="上一页" next-text="下一页"></un-pagination>

省略号模式

当页数过多时，可以通过force-ellipses显示省略号。

<un-pagination v-model="currentPage" :total="1000" :page-size="10" :pager-count="5" force-ellipses></un-pagination>

禁用状态

通过disabled属性可以禁用分页器。

<un-pagination v-model="currentPage" :total="100" :page-size="10" disabled></un-pagination>

自定义插槽

可以通过插槽自定义按钮内容。

<un-pagination
	v-model="currentPage"
	:total="204"
	:page-size="5"
	:pager-count="3"
	:force-ellipses="true"
	:border-color="false"
	:bg-color="false"
	:active-bg-color="false"
>
	<template #prev="{ disabled }">
		<text>👈</text>
	</template>
	<template #page="{ label, active }">
		<text>{{label}}</text>
	</template>
	<template #next="{ disabled }">
		<text>👉</text>
	</template>
</un-pagination>

API

Props

参数	说明	类型	默认值
modelValue	当前页码	Number	1
total	总记录数	Number	0
pageSize	每页显示的记录数	Number	10
pagerCount	显示的页码按钮数量	Number	5
disabled	是否禁用分页	Boolean	false
forceEllipses	是否显示省略号	Boolean	false
simple	是否为简单分页	Boolean	false
showPrevButton	是否展示上一页按钮	Boolean	true
showNextButton	是否展示下一页按钮	Boolean	true
prevText	上一页按钮文字	String	上一页
nextText	下一页按钮文字	String	下一页
bgColor	背景色	String	-
color	文本色	String	-
activeBgColor	激活背景色	String	-
activeColor	激活文本色	String	-
fontSize	字体尺寸	String	-
round	圆角	String	-
borderColor	描边色	String	-
itemWidth	每项宽度	String	34px
itemHeight	每项高度	String	34px

Events

事件名	说明	类型
change	切换分页时触发	Function

Slots

名称	说明	参数
prev	自定义上一页按钮内容	disabled: 是否禁用
next	自定义下一页按钮内容	disabled: 是否禁用
page	自定义页码按钮内容	label: 页码标签, active: 是否激活