Li-Daisy

Appearance

Paging分页 ​

用于对大量数据进行分页展示

分页数表示 ​

分页组件支持两种方式指定总页数：

  1. 直接通过 pages 属性指定总页数
  2. 通过 total 和 page-size 属性自动计算总页数

若同时指定，前者优先级更高

1. 基础用法 (pages)

2. 计算总页数 (total & page-size)

vue
<template>
  <!-- 示例1: 基础用法 - 直接指定总页数 -->
  <div class="space-y-4">
    <h3 class="text-lg font-bold">1. 基础用法 (pages)</h3>
    <div class="flex items-center gap-4">
      <Paging v-model="currentPage1" :pages="totalPages1" />
    </div>
  </div>

  <!-- 示例2: 计算总页数 - 使用 total 和 page-size -->
  <div class="space-y-4">
    <h3 class="text-lg font-bold">2. 计算总页数 (total & page-size)</h3>
    <div class="flex items-center gap-4">
      <Paging v-model="currentPage2" :total="totalItems" :page-size="itemsPerPage" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Paging } from 'li-daisy'

// 示例1: 使用 pages 属性
const currentPage1 = ref(5)
const totalPages1 = 10

// 示例2: 使用 total 和 perPage 计算
const currentPage2 = ref(5)
const totalItems = ref(100)
const itemsPerPage = ref(10)
</script>

尺寸 ​

通过 size 来设置尺寸大小 可选值有 xs sm md lg xl

vue
<template>
  <div class="w-full flex flex-col gap-y-4 items-center">
    <Paging
      v-for="size in sizes"
      :key="size"
      v-model="currentPage"
      :pages="10"
      :size="size"
    ></Paging>
  </div>
</template>

<script setup lang="ts">
import { Paging, type PagingSize } from 'li-daisy'

import { ref } from 'vue'

const sizes = ref<PagingSize[]>(['xs', 'sm', 'md', 'lg', 'xl'])

const currentPage = ref(5)
</script>

颜色 ​

通过 color 来设置颜色

可选值 [base,neutral,primary,secondary,accent,info,success,warning,error]

vue
<template>
  <div class="w-full flex flex-col gap-y-4">
    <Paging
      v-for="color in colors"
      :key="color"
      v-model="currentPage"
      class="m-auto"
      :pages="10"
      :color="color"
    ></Paging>
  </div>
</template>

<script setup lang="ts">
import { Paging, type PagingColor } from 'li-daisy'
import { ref } from 'vue'

const colors = ref<PagingColor[]>([
  'base',
  'neutral',
  'primary',
  'secondary',
  'accent',
  'info',
  'success',
  'warning',
  'error',
])

const currentPage = ref(5)
</script>

单页时隐藏 ​

通过 hide-on-single-page 设置单页隐藏分页，默认为 false

单页时隐藏分页

vue
<template>
  <div class="w-full flex flex-col items-center">
    <p class="font-bold">单页时隐藏分页</p>
    <Paging v-model="currentPage" :pages="1" :hide-on-single-page="true"></Paging>
  </div>
</template>

<script setup lang="ts">
import { Paging } from 'li-daisy'
import { ref } from 'vue'

const currentPage = ref(5)
</script>

设置offset ​

通过 offset 设置偏移量，用于显示更大的可选区间，默认为 1

关于分页区间的显示:始终显示第一页和最后一页，offset影响的是当前页码选中时左右最多可显示页码数(除开第一页和最后一页)

该例子中当前页为 第5页 时，就能显示 1 ... 3 4 5 6 7 ... 10

vue
<template>
  <div class="w-full flex">
    <Paging v-model="currentPage" class="m-auto" :pages="10" :current-page="5" :offset="2"></Paging>
  </div>
</template>

<script setup lang="ts">
import { Paging } from 'li-daisy'
import { ref } from 'vue'

const currentPage = ref(5)
</script>

是否显示Icon ​

通过 icon 设置是否显示箭头图标，默认为 true

vue
<template>
  <div class="w-full flex">
    <Paging v-model="currentPage" class="m-auto" :pages="10" icon></Paging>
  </div>
</template>

<script setup lang="ts">
import { Paging } from 'li-daisy'
import { ref } from 'vue'

const currentPage = ref(5)
</script>

小设备隐藏Icon ​

通过 hide-icon-on-sm 设置是否隐藏小设备（宽度640px以下）上的箭头图标，默认为 true

vue
<template>
  <div class="w-full flex">
    <Paging v-model="currentPage" class="m-auto" :pages="10" hide-icon-on-sm></Paging>
  </div>
</template>

<script setup lang="ts">
import { Paging } from 'li-daisy'
import { ref } from 'vue'

const currentPage = ref(5)
</script>

关于爬虫 (SEO 优化) ​

为了方便搜索引擎爬虫发现和索引分页内容，paging 组件内置了 SEO 优化机制。当配置了链接生成方式时，组件会自动在内部渲染一个视觉上隐藏（但对爬虫和屏幕阅读器可见）的 <div>，其中包含指向上一页和下一页的 <a> 链接。

paging 提供了两种方式来生成这些 SEO 友好的链接：

1. 使用 pre-href (简单路径) ​

适用于分页链接结构为 基础路径 + 页码 的情况 (例如 /articles/2)。你只需提供 URL 前缀，组件会自动附加页码。

2. 使用 href-generator (复杂 URL 或自定义逻辑) ​

适用于 URL 结构复杂（如包含查询参数 /search?query=abc&page=2）或需要自定义链接生成逻辑的场景。你需要提供一个函数，该函数接收页码并返回完整的 URL 字符串。此方法优先于 pre-href。

下面的示例演示了这两种方法的使用：

使用 pre-href="/article/" (当前第 3 页)

Previous PageNext Page

爬虫现在可以发现指向 /article/2 (上一页) 和 /article/4 (下一页) 的链接。

使用 href-generator (当前第 5 页)

Previous PageNext Page

爬虫现在可以发现指向 /blog/page/4 (上一页) 和 /blog/page/6 (下一页) 的链接。

vue
<template>
  <div class="w-full flex flex-col gap-y-4">
    <!-- 示例 1: 使用 pre-href -->
    <p class="text-center text-sm">使用 <code>pre-href="/article/"</code> (当前第 3 页)</p>
    <Paging v-model="currentPage1" class="m-auto" :pages="10" pre-href="/article/"></Paging>
    <p class="text-center text-xs text-base-content/70">
      爬虫现在可以发现指向 <code>/article/2</code> (上一页) 和 <code>/article/4</code> (下一页)
      的链接。
    </p>

    <!-- 示例 2: 使用 href-generator -->
    <p class="text-center text-sm">使用 <code>href-generator</code> (当前第 5 页)</p>
    <Paging
      v-model="currentPage2"
      class="m-auto"
      :pages="10"
      :href-generator="generateLink"
    ></Paging>
    <p class="text-center text-xs text-base-content/70">
      爬虫现在可以发现指向 <code>/blog/page/4</code> (上一页) 和 <code>/blog/page/6</code> (下一页)
      的链接。
    </p>
  </div>
</template>

<script setup lang="ts">
import { Paging } from 'li-daisy'
import { ref } from 'vue'

const currentPage1 = ref(3)
const currentPage2 = ref(5)

// href-generator 函数示例
const generateLink = (page: number) => {
  // 模拟复杂逻辑，例如第一页特殊处理
  if (page === 1) {
    return '/blog'
  }
  // 其他页使用不同路径结构
  return `/blog/page/${page}`
}
</script>

API ​

Attributes ​

Props ​

属性值说明类型默认值
pages分页总数number-
total数据总条数number-
page-size每页显示条数number-
size尺寸PagingSize'md'
color颜色PagingColorbase
hide-on-single-page单页时是否隐藏booleanfalse
offset偏移量number1
icon否显示箭头图标booleanture
hide-icon-on-sm是否隐藏小设备上的箭头图标booleanture
pre-href简单路径前缀string-
href-generator自定义路径生成逻辑(page: number) => string-

Event ​

名称说明类型
change页面跳转回调(page:number) => void

Expose ​

方法名说明类型
change页面跳转(page: number) => void
currentPage验证某个字段number
pages总页面number