Pagination 翻页
示例
版式
<template>
<article>
<veui-pagination
:page="page"
:total="total"
:to="to"
/>
<veui-pagination
:page="page"
:total="total"
:to="to"
ui="hetero"
/>
<veui-pagination
:page="page"
:total="total"
:to="to"
ui="full"
/>
<veui-pagination
:page="page"
:total="total"
:to="to"
ui="slim"
/>
</article>
</template>
<script>
import { Pagination } from 'veui'
export default {
components: {
'veui-pagination': Pagination
},
data () {
return {
to: './pagination?page=:page',
total: 10101
}
},
computed: {
page () {
return Number(this.$route.query.page) || 1
}
}
}
</script>
API
属性
名称 | 类型 | 默认值 | 描述 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ui | string | - | 预设样式。
| ||||||||||
page | number | 1 | 当前页码(从 1 开始)。 | ||||||||||
total | number | - | 总页数。 | ||||||||||
to | string|Object | '' | 目标链接模板。类型见 | ||||||||||
native | boolean | false | 原生链接跳转。 | ||||||||||
page-size | number | pagination.pageSize |
每页个数。 | ||||||||||
page-sizes | Array | pagination.pageSizes | 每页个数候选项。 |
事件
名称 | 描述 |
---|---|
pagesizechange | page-size 改变时触发,回调参数为 (size: number) 。size 为新的 page-size 值。 |
redirect | 链接跳转时触发,回调参数为 (page: number, event: Object) 。page 为要跳转的目标页码。event 为原生的事件对象,在 native 为 true 时,调用 event.preventDefault 可阻止跳转。 |
全局配置
配置项 | 类型 | 默认值 | 描述 |
---|---|---|---|
pagination.pageSize | number | 30 | 每页个数。 |
pagination.pageSizes | Array<number> | [30, 50, 100] | 每页个数候选项。 |