Pagination
用法
使用 default-page 属性或 v-model:page 指令来控制当前页。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :total="100" />
</template>
总数
使用 total 属性设置列表中项目的总数。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :total="100" />
</template>
每页项数
使用 items-per-page 属性设置每页的项数。默认为 10。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :items-per-page="20" :total="100" />
</template>
相邻页数
使用 sibling-count 属性设置要显示的相邻页数。默认为 2。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :sibling-count="1" :total="100" />
</template>
显示边界
使用 show-edges 属性始终显示省略号、第一页和最后一页。默认为 false。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" show-edges :sibling-count="1" :total="100" />
</template>
显示控件
使用 show-controls 属性显示第一页、上一页、下一页和最后一页按钮。默认为 true。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :show-controls="false" show-edges :total="100" />
</template>
颜色
使用 color 属性设置非活动控件的颜色。默认为 neutral。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" color="primary" :total="100" />
</template>
变体
使用 variant 属性设置非活动控件的变体。默认为 outline。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" color="neutral" variant="subtle" :total="100" />
</template>
活动颜色
使用 active-color 属性设置活动控件的颜色。默认为 primary。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" active-color="neutral" :total="100" />
</template>
活动变体
使用 active-variant 属性设置活动控件的变体。默认为 solid。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" active-color="primary" active-variant="subtle" :total="100" />
</template>
尺寸
使用 size 属性设置控件的大小。默认为 md。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" size="xl" :total="100" />
</template>
禁用
使用 disabled 属性禁用分页控件。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :total="100" disabled />
</template>
示例
带链接
使用 to 属性将按钮转换为链接。传递一个接收页码并返回路由目标的函数。
<script setup lang="ts">
const page = ref(5)
function to(page: number) {
return {
query: {
page
},
hash: '#with-links'
}
}
</script>
<template>
<UPagination v-model:page="page" :total="100" :to="to" :sibling-count="1" show-edges />
</template>
#with-links 哈希，以避免页面顶部跳转。API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
firstIcon |
|
用于第一页控件的图标。 |
prevIcon |
|
用于上一页控件的图标。 |
nextIcon |
|
用于下一页控件的图标。 |
lastIcon |
|
用于最后一页控件的图标。 |
ellipsisIcon |
|
用于省略号控件的图标。 |
color |
|
分页控件的颜色。 |
variant |
|
分页控件的变体。 |
activeColor |
|
活动分页控件的颜色。 |
activeVariant |
|
活动分页控件的变体。 |
showControls |
|
是否显示第一页、上一页、下一页和最后一页控件。 |
尺寸 |
| |
过渡到 |
用于渲染页面控件为链接的函数。 | |
disabled |
当设置为 | |
页码 |
当前页面的受控值。可以作为 | |
defaultPage |
初始渲染时应激活的页面的值。 当您不需要控制值状态时使用。 | |
itemsPerPage |
|
每页项数 |
showEdges |
|
当设置为 |
siblingCount |
|
当前页周围应显示的相邻页数 |
总数 |
|
列表中的项目数 |
ui |
|
插槽
| 插槽 | 类型 |
|---|---|
first |
|
prev |
|
next |
|
last |
|
ellipsis |
|
item |
|
事件
| 事件 | 类型 |
|---|---|
update:page |
|
主题
export default defineAppConfig({
ui: {
pagination: {
slots: {
root: '',
list: 'flex items-center gap-1',
ellipsis: 'pointer-events-none',
label: 'min-w-5 text-center',
first: '',
prev: '',
item: '',
next: '',
last: ''
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pagination: {
slots: {
root: '',
list: 'flex items-center gap-1',
ellipsis: 'pointer-events-none',
label: 'min-w-5 text-center',
first: '',
prev: '',
item: '',
next: '',
last: ''
}
}
}
})
]
})