Pagination

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

用法

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

Pagination 组件使用了一些 Button 来显示页面，使用颜色, 变体和尺寸属性来设置它们的样式。

总数

使用 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 hash 以避免页面跳转到顶部。

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

firstIcon

appConfig.ui.icons.chevronDoubleLeft

string

用于第一页控制按钮的图标。

prevIcon

appConfig.ui.icons.chevronLeft

string

用于上一页控制按钮的图标。

nextIcon

appConfig.ui.icons.chevronRight

string

用于下一页控制按钮的图标。

lastIcon

appConfig.ui.icons.chevronDoubleRight

string

用于最后一页控制按钮的图标。

ellipsisIcon

appConfig.ui.icons.ellipsis

string

用于省略号控制按钮的图标。

颜色

'neutral'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

分页控制按钮的颜色。

变体

'outline'

"link" | "solid" | "outline" | "soft" | "subtle" | "ghost"

分页控制按钮的变体。

activeColor

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

活动分页控制按钮的颜色。

activeVariant

'solid'

"link" | "solid" | "outline" | "soft" | "subtle" | "ghost"

活动分页控制按钮的变体。

showControls

true

boolean

是否显示第一页、上一页、下一页和最后一页控制按钮。

尺寸

'md'

"sm" | "md" | "xs" | "lg" | "xl"

to

(page: number): string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

将页码控制按钮渲染为链接的函数。

disabled

boolean

当 true 时，阻止用户与项目交互

page

number

当前页的受控值。可以绑定为 v-model:page。

defaultPage

number

初始渲染时应处于活动状态的页码值。

当你不需要控制值状态时使用。

itemsPerPage

10

number

每页项目数量

showEdges

false

boolean

当 true 时，始终显示第一页、最后一页和省略号

siblingCount

2

number

当前页附近应显示的兄弟页码数量

total

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

{}

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: ''
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      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: ''
          }
        }
      }
    })
  ]
})

NavigationMenu

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

PinInput

一个用于输入 PIN 码的输入元素。