Pagination

一个用于在页面之间导航的按钮或链接列表。

用法

使用 default-page prop 或 v-model:page 指令来控制当前页。

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" />
</template>

分页组件使用一些 Button 来显示页面，使用color, variant和尺寸props 来设置它们的样式。

总数

使用 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。

itemsPerPage

总数

<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。

siblingCount

<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。

showEdges

siblingCount

<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。

showControls

showEdges

<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。

color

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" color="primary" :total="100" />
</template>

变体

使用 variant prop 设置非活动控制按钮的变体。默认为 outline。

color

variant

<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。

activeColor

<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。

activeColor

activeVariant

<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 禁用分页控制。

disabled

<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 散列以避免跳转到页面顶部。

API

属性

属性	默认值	类型
`as`	`'div'`	`any` 此组件应渲染为的元素或组件。
`firstIcon`	`appConfig.ui.icons.chevronDoubleLeft`	`any` 用于第一页控制按钮的图标。
`prevIcon`	`appConfig.ui.icons.chevronLeft`	`any` 用于上一页控制按钮的图标。
`nextIcon`	`appConfig.ui.icons.chevronRight`	`any` 用于下一页控制按钮的图标。
`lastIcon`	`appConfig.ui.icons.chevronDoubleRight`	`any` 用于最后一页控制按钮的图标。
`ellipsisIcon`	`appConfig.ui.icons.ellipsis`	`any` 用于省略号控制按钮的图标。
`color`	`'neutral'`	`"错误" \| "中性" \| "主要" \| "次要" \| "成功" \| "信息" \| "警告"` 分页控制按钮的颜色。
`variant`	`'outline'`	`"outline" \| "solid" \| "soft" \| "subtle" \| "ghost" \| "link"` 分页控制按钮的变体。
`activeColor`	`'primary'`	`"错误" \| "中性" \| "主要" \| "次要" \| "成功" \| "信息" \| "警告"` 活动分页控制按钮的颜色。
`activeVariant`	`'solid'`	`"outline" \| "solid" \| "soft" \| "subtle" \| "ghost" \| "link"` 活动分页控制按钮的变体。
`showControls`	`true`	`boolean` 是否显示第一页、上一页、下一页和最后一页控制按钮。
`尺寸`		`"xs" \| "sm" \| "md" \| "lg" \| "xl"`
`过渡到`		`(page: number): string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric` 将页面控制按钮渲染为链接的函数。
`defaultPage`		`number` 初始渲染时应激活的页面值。当您不需要控制值状态时使用。
`disabled`		`boolean` 当 `true` 时，阻止用户与项目交互
`itemsPerPage`	`10`	`number` 每页的项目数
`页码`		`number` 当前页的受控值。可以绑定为 `v-model:page`。
`showEdges`	`false`	`boolean` 当 `true` 时，始终显示第一页、最后一页和省略号
`siblingCount`	`2`	`number` 当前页周围应显示的兄弟页数
`总数`	`0`	`number` 列表中的项目数
`ui`		`{ root?: ClassNameValue; list?: ClassNameValue; ellipsis?: ClassNameValue; label?: ClassNameValue; first?: ClassNameValue; prev?: ClassNameValue; item?: ClassNameValue; next?: ClassNameValue; last?: ClassNameValue; }`

插槽

插槽	类型
`first`	`{}`
`prev`	`{}`
`next`	`{}`
`last`	`{}`
`ellipsis`	`{ ui: object; }`
`item`	`{ page: number; pageCount: number; item: { type: "ellipsis"; } \| { type: "page"; value: number; }; index: number; }`

事件

事件	类型
`update:page`	`[value: number]`

主题

app.config.ts

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: ''
      }
    }
  }
})

vite.config.ts

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: ''
          }
        }
      }
    })
  ]
})

更新日志

dd81d— feat: 添加 data-slot 属性 (#5447)

63c0a— feat: 在使用的 slot prop 中暴露 ui (#5207)

62f64— fix: 使省略号不可交互 (#5081)

61b60— 功能：允许传递组件而不是名称 (#4766)

5cb65— 特性：导入 @nuxt/ui-pro 组件

4dd56— fix: 匹配默认按钮 size (#4350)

e6e51— fix：class 应该优先于 ui 属性

39c86— fix：@nuxt/module-builder 升级后重构类型（#3855)

NavigationMenu

可以水平或垂直显示的一系列链接。

Stepper

一组用于指示多步骤流程进度的步骤。