分页

分页GitHub
用于页面导航的按钮或链接列表。

用法

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

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

总条数

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

'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

用于省略号控制的图标。

color

'neutral'

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

分页控制按钮的颜色。

variant

'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

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

尺寸

"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码的输入元素。