使用 default-page prop 或 v-model:page 指令来控制当前页。
使用 total prop 设置列表中的项目总数。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :total="100" />
</template>
使用 items-per-page prop 设置每页显示的项目数。默认为 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 prop 设置要显示的兄弟页码数。默认为 2。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :sibling-count="1" :total="100" />
</template>
使用 show-edges prop 始终显示省略号、第一页和最后一页。默认为 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 prop 显示第一页、上一页、下一页和最后一页按钮。默认为 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 prop 设置非活动控制的颜色。默认为 neutral。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" color="primary" :total="100" />
</template>
使用 variant prop 设置非活动控制的变体。默认为 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 prop 设置活动控制的颜色。默认为 primary。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" active-color="neutral" :total="100" />
</template>
使用 active-variant prop 设置活动控制的变体。默认为 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 prop 设置控制的大小。默认为 md。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" size="xl" :total="100" />
</template>
使用 disabled prop 禁用分页控制。
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<UPagination v-model:page="page" :total="100" disabled />
</template>
使用 to prop 将按钮转换为链接。传递一个函数，该函数接收页码并返回一个路由目标。
<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 hash 以避免跳转到页面顶部。| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
firstIcon |
|
用于第一页控制的图标。 |
prevIcon |
|
用于上一页控制的图标。 |
nextIcon |
|
用于下一页控制的图标。 |
lastIcon |
|
用于最后一页控制的图标。 |
ellipsisIcon |
|
用于省略号控制的图标。 |
color |
| 分页控件的颜色。 |
variant |
| 分页控件的变体。 |
activeColor |
|
活动分页控件的颜色。 |
activeVariant |
|
活动分页控件的变体。 |
showControls |
|
是否显示第一页、上一页、下一页和最后一页控件。 |
尺寸 |
| |
过渡到 |
一个将页面控制渲染为链接的函数。 | |
defaultPage |
初始渲染时应处于活动状态的页码值。 当您不需要控制值状态时使用。 | |
disabled |
当 | |
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: ''
}
}
}
})
]
})