vant分页组件 Vant4 Pagination 分页

vant分页组件

Vant 分页组件是一款基于 Vue.js 的分页组件，它可以帮助开发者快速构建出分页功能。它的特点是易用性强，使用简单，可以自定义样式，并且支持多种分页样式。

Vant 分页组件的使用方法很简单，只需要在 HTML 文件中引入 Vant 的分页组件，然后在 JavaScript 中调用它即可。例如：

import { Pagination } from 'vant';
Vue.use(Pagination);

在 HTML 文件中使用 Vant 分页组件时，我们可以使用 v-model 来设置当前的分页数量。例如：

<van-pagination v-model="currentPage" :total="100"/>

Vant 分页组件支持多种分页样式，我们可以通过设置 type 属性来更改分页样式。例如：

<van-pagination type="simple"/>

此外，Vant 分页组件支持自定义样式。我们可以通过设置 style 属性来修改分页的样式。例如：

<van-pagination style="background: #f00;"/>

最后要说的是 Vant 分页组件支持事件回调函数。我们可以通过 @change 事件来监听当前的分页数量是否有变化。例如：

Vant4 Pagination 分页
介绍
数据量过多时，采用分页的形式将数据分隔，每次只加载一个页面。
引入
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
import { createApp } from "vue";
import { Pagination } from "vant";

const app = createApp();
app.use(Pagination);

代码演示
基础用法
通过 ​v-model​ 来绑定当前页码。
<van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
import { ref } from "vue";

export default {
  setup() {
    const currentPage = ref(1);
    return { currentPage };
  },
};

简单模式
将 ​mode​ 设置为 ​simple​ 来切换到简单模式，此时分页器不会展示具体的页码按钮。
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />

显示省略号
设置 ​force-ellipses​ 后会展示省略号按钮，点击后可以快速跳转。
<van-pagination
  v-model="currentPage"
  :total-items="125"
  :show-page-size="3"
  force-ellipses
/>

自定义按钮
通过 ​prev-text​、​next-text​ 等插槽来自定义分页按钮的内容。
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
  <template #prev-text>
    <van-icon name="arrow-left" />
  </template>
  <template #next-text>
    <van-icon name="arrow" />
  </template>
  <template #page="{ text }">{{ text }}</template>
</van-pagination>

API
Props

    

        

            
参数
            
说明
            
类型
            
默认值
        
    
    

        

            
v-model
            
当前页码
            
number
            
            
-
        
        

            
mode
            
显示模式，可选值为 simple
            
            
string
            
            
multi
            
        
        

            
prev-text
            
上一页按钮文字
            
string
            
            
上一页
            
        
        

            
next-text
            
下一页按钮文字
            
string
            
            
下一页
            
        
        

            
page-count
            
总页数
            
number | string
            
            
根据页数计算
        
        

            
total-items
            
总记录数
            
number | string
            
            
0
            
        
        

            
items-per-page
            
每页记录数
            
number | string
            
            
10
            
        
        

            
show-page-size
            
显示的页码个数
            
number | string
            
            
5
            
        
        

            
force-ellipses
            
是否显示省略号
            
boolean
            
            
false
            
        
    

Events

    

        

            
事件名
            
说明
            
回调参数
        
    
    

        

            
change
            
页码改变时触发
            
-
        
    

Slots

    

        

            
名称
            
描述
            
参数
        
    
    

        

            
page
            
自定义页码
            
{ number: number, text: string, active: boolean }
            
        
        

            
prev-text
            
自定义上一页按钮文字
            
-
        
        

            
next-text
            
自定义下一页按钮文字
            
-
        
    

类型定义
组件导出以下类型定义：
import type { PaginationMode, PaginationProps } from "vant";

主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

    

        

            
名称
            
默认值
            
描述
        
    
    

        

            
--van-pagination-height
            
40px
            
            
-
        
        

            
--van-pagination-font-size
            
var(--van-font-size-md)
            
            
-
        
        

            
--van-pagination-item-width
            
36px
            
            
-
        
        

            
--van-pagination-item-default-color
            
var(--van-primary-color)
            
            
-
        
        

            
--van-pagination-item-disabled-color
            
var(--van-gray-7)
            
            
-
        
        

            
--van-pagination-item-disabled-background
            
var(--van-background)
            
            
-
        
        

            
--van-pagination-background
            
var(--van-background-2)
            
            
-
        
        

            
--van-pagination-desc-color
            
var(--van-gray-7)
            
            
-
        
        

            
--van-pagination-disabled-opacity
            
var(--van-disabled-opacity)
            
            
-