Pagination 分页器

根据数量的总数来进行分页显示。适用于数据较多时，同时可以快速指定页码跳转。

TIP

ps: 本组件并未使用v-model指令开绑定数据，而是使用v-bind指令绑定数据，因为分页器需要根据数据总数来计算页码，所以需要使用v-bind指令来绑定数据。但绑定数据变化内部会自动更新页码。如需动态获取页面请使用组件的事件监听手动获取。

基本用法

可以使用total属性来指定数据的总数，pageSize属性来指定每页显示的数量，currentPage属性来指定当前页码。默认每页显示5条数据，默认当前页码为1。

<template>
        <p>
            <ym-pagination 
            :pagerCount="6" 
            @current-change="handlePageChange" 
            :total="100" 
            :pageSize="10" 
            :currentPage="currentPage"></ym-pagination>
        </p>
</template>

<script setup>
import { ref } from 'vue'
import { YmMessage } from 'guyan-ym-ui'

const currentPage = ref(1)


const handlePageChange = (page) => {
    currentPage.value = page
    YmMessage.success(`当前页码：${page}`)
}
</script>

<style  scoped>

</style>

禁用状态

可以使用disabled属性来禁用分页器，禁用的分页器无法执行任何操作。

<template>
    <div class="container">
        <p>
            <ym-pagination disabled @current-change="handlePageChange" :total="100" :pageSize="10" :currentPage="currentPage"></ym-pagination>
        </p>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { YmMessage } from 'guyan-ym-ui'

const currentPage = ref(1)


const handlePageChange = (page) => {
    currentPage.value = page
    YmMessage.success(`当前页码：${page}`)
}
</script>

<style lang="scss" scoped>

</style>

带有背景的分页器

可以使用background属性来指定分页器是否有背景。该属性只改变分页器的背景颜色，不会改变分页器的样式。颜色默认为主题色，并未提供颜色更改属性，如果需要自定义可自行修改样式。

<template>
    <div class="container">
        <p>
            <ym-pagination background @current-change="handlePageChange" :total="100" :pageSize="10" :currentPage="currentPage"></ym-pagination>
        </p>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { YmMessage } from 'guyan-ym-ui'

const currentPage = ref(1)


const handlePageChange = (page) => {
    currentPage.value = page
    YmMessage.success(`当前页码：${page}`)
}
</script>

<style lang="scss" scoped>

</style>

显示页码数

可以使用pagerCount属性来设置需要显示的最大页码数量，超出数量的页码会显示为省略号，默认显示的页码为当前页码前后各pagerCount/2个，该属性默认为5。该属性也是响应式，会自动监听数据变化，如果数据变化会自动更新页码。

<template>
    <p>
        <ym-pagination 
        :pagerCount="5" 
        @current-change="handlePageChange" 
        :total="100" 
        :pageSize="10" 
        :currentPage="currentPage"
        ></ym-pagination>
    </p>
    <p>
        <ym-pagination 
        :pagerCount="7" 
        @current-change="handlePageChange" 
        :total="100" 
        :pageSize="10" 
        :currentPage="currentPage"
        ></ym-pagination>
    </p>
    <p>
        <ym-pagination 
        :pagerCount="8" 
        @current-change="handlePageChange" 
        :total="100" 
        :pageSize="10" 
        :currentPage="currentPage"
        ></ym-pagination>
    </p>
</template>

<script setup>
import { ref } from 'vue'
import { YmMessage } from 'guyan-ym-ui'

const currentPage = ref(1)

const handlePageChange = (page) => {
currentPage.value = page
YmMessage.success(`当前页码：${page}`)
}
</script>

<style  scoped>

</style>

自定义按钮

可以使用prevText和nextText属性来自定义上一页和下一页的按钮文本，默认为上一页和下一页。可以使用prevIcon和nextIcon属性来自定义上一页和下一页的按钮图标，默认为<i class="iconfont icon-arrow-left"></i>和<i class="iconfont icon-arrow-right"></i>。

<template>
    <p>
        <ym-pagination prevText="上一页" nextText="下一页" :total="100" :currentPage="currentPage"></ym-pagination>
    </p>
    <p>
        <ym-pagination prevIcon="arrow-left" nextIcon="arrow-right" :total="100" :currentPage="currentPage"></ym-pagination>
    </p>
    <p>
        <ym-pagination background prevText="上一页" nextText="下一页" :total="100" :currentPage="currentPage"></ym-pagination>
    </p>
    <p>
        <ym-pagination background prevIcon="arrow-left" nextIcon="arrow-right" :total="100" :currentPage="currentPage"></ym-pagination>
    </p>
</template>

<script setup>



</script>

<style  scoped>

</style>

页码跳转

可以使用jumper开启页码跳转器，在输入框中输入页码即可跳转到指定页码，如果页码不存在则不会有响应，如果输入值为非数值且无法转换则会报错。

前往

页

<template>
    <p>
        <ym-pagination 
        :pagerCount="6" 
        @current-change="handlePageChange" 
        :total="100" 
        :pageSize="10" 
        :currentPage="currentPage"
        background
        jumper
        ></ym-pagination>
    </p>
</template>

<script setup>
import { ref } from 'vue'
import { YmMessage } from 'guyan-ym-ui'

const currentPage = ref(1)


const handlePageChange = (page) => {
currentPage.value = page
YmMessage.success(`当前页码：${page}`)
}
</script>

<style  scoped>

</style>

每页显示数量

可以使用pageSize属性来设置每页显示数量，默认为5，可以通过属性sizeSelector来开启每页页数选择器，默认为false，开启后可以手动选择每页显示数量。可以通过pageSizes来设置选择器的选项，接收一个递增的数字数组，默认为[5, 10, 15,20]。在每次页数切换之后，当前页码会重置为1。

<template>
    <p>
        <ym-pagination 
        @current-change="handlePageChange" 
        @size-change="handleSizeChange"
        :total="500" 
        :pageSize="10" 
        :pagerCount="10"
        :currentPage="currentPage"
        background
        :pageSizes="[10,20,30,40]"
        sizeSelector
        ></ym-pagination>
    </p>
</template>

<script setup>
import { ref } from 'vue'
import { YmMessage } from 'guyan-ym-ui'

const currentPage = ref(1)


const handlePageChange = (page) => {
currentPage.value = page
YmMessage.success(`当前页码：${page}`)
}
const handleSizeChange = (size) => {
YmMessage.success(`每页${size}条`)
}
</script>

<style  scoped>

</style>

Pagination API

Props

Name	Description	Type	Default
type	类型	`enum` - `'text' \| 'password' \| 'textarea'`	text
background	是否有背景	`boolean`	false
pageSize	每页显示数量	`number`	5
total	数据总数	`number`	0
pagerCount	显示的页码数量	`number`	5
currentPage	当前页码	`number`	1
pageSizes	每页显示数量选择器的选项	`number[]`	[5, 10, 15, 20]
prevText	上一页按钮文本	`string`	上一页
nextText	下一页按钮文本	`string`	下一页
prevIcon	上一页按钮图标	`string`	`icon-arrow-left`
nextIcon	下一页按钮图标	`string`	`icon-arrow-right`
disabled	是否禁用	`boolean`	false
sizeSelector	是否显示每页显示数量选择器	`boolean`	false
jumper	是否显示页码跳转器	`boolean`	false
totalor	是否显示数据总数	`boolean`	false

Events

Name	Description	Type
size-change	每页显示数量改变时触发	`(val: number) => void`
current-change	当前页码改变时触发	`(val: number) => void`
prev-click	上一页按钮点击时触发	`() => void`
next-click	下一页按钮点击时触发	`() => void`

Pagination 分页器 ​

基本用法 ​

禁用状态 ​

带有背景的分页器 ​

显示页码数 ​

自定义按钮 ​

页码跳转 ​

每页显示数量 ​

Pagination API ​

Props ​

Events ​