Pagination 翻页

示例

尺寸

<template>
<article>
  <veui-pagination
    :page="page"
    :total="total"
    :to="to"
  />
  <veui-pagination
    :page="page"
    :total="total"
    :to="to"
    ui="s"
  />
  <veui-pagination
    :page="page"
    :total="total"
    :to="to"
    ui="xs"
  />
</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>

<style lang="less" scoped>
article {
  text-align: right;
}

.veui-pagination {
  margin: 1.2em 0;
}
</style>

跳转到指定页

使用 goto 属性开启跳转到指定页的功能。

<template>
<article>
  <veui-pagination
    :page="page"
    :total="total"
    :to="to"
    goto
  />
</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>

<style lang="less" scoped>
article {
  text-align: right;
}
</style>

API

属性

名称类型默认值描述
uistring=-

预设样式。

值描述
xs超小尺寸样式。
s小尺寸样式。
m中尺寸样式。
pagenumber1当前页码（从 1 开始）。
totalnumber-总页数。
tostring|Object''

目标链接模板。类型见 Link 组件的同名属性。其中，类型为 string 路径时其中的 :page 关键词会被替换为实际页码。类型为 Object 时，会将起转换为 string 后替换掉 :page 部分。

nativebooleanfalse原生链接跳转。
page-sizenumberpagination.pageSize

.sync

每页个数。

page-sizesArraypagination.pageSizes每页个数候选项。
gotobooleanfalse是否显示直接跳转到页码。

事件

名称描述
pagesizechangepage-size 改变时触发，回调参数为 (size: number)。size 为新的 page-size 值。
redirect链接跳转时触发，回调参数为 (page: number, event: Object)。page 为要跳转的目标页码。event 为原生的事件对象，在 native 为 true 时，调用 event.preventDefault 可阻止跳转。

全局配置

配置项类型默认值描述
pagination.pageSizenumber30每页个数。
pagination.pageSizesArray<number>[30, 50, 100]每页个数候选项。