代码演示

如何引入

import { Pagination } from '@kousum/semi-ui-vue';

基本

基础分页，通过 total 设置总条数，pageSize 设置每页容量

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

10

 

1

import { Pagination } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <div>

5

        <Pagination total={30} style={{ marginBottom: '12px' }}></Pagination>

6

        <Pagination total={80} style={{ marginBottom: '12px' }}></Pagination>

7

        <Pagination total={200} style={{ marginBottom: '12px' }}></Pagination>

8

        <Pagination total={80} pageSize={30} style={{ marginBottom: '12px' }}></Pagination>

9

    </div>

10

);

Show Error

Auto Save

禁用

通过 disabled 设置禁用

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Pagination } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Pagination total={30} disabled style={{ marginBottom: '12px' }}></Pagination>

5

);

Show Error

Auto Save

总页数显示

通过 showTotal 属性控制是否展示总页数

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Pagination } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <div>

5

        <Pagination total={80} showTotal style={{ marginBottom: '12px' }}></Pagination>

6

        <Pagination total={200} showTotal style={{ marginBottom: '12px' }}></Pagination>

7

    </div>

8

);

Show Error

Auto Save

指定当前页码

可以通过 defaultCurrentPage 指定当前激活的页码

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Pagination } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <div>

5

        <Pagination total={80} showTotal defaultCurrentPage={3}></Pagination>

6

    </div>

7

);

Show Error

Auto Save

每页容量切换

通过设置 showSizeChanger 为 true，允许通过 Select 组件快速切换每页容量

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Pagination } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <div>

5

        <Pagination total={80} showSizeChanger style={{ marginBottom: '12px' }}></Pagination>

6

        <Pagination total={300} showSizeChanger></Pagination>

7

    </div>

8

);

Show Error

Auto Save

快速跳转至某页

通过设置 showQuickJumper 为 true, 允许通过Input控件输入页码，快速跳转
当Input失去焦点时，若Input中为有效数字，会直接进行跳转。你亦可在Input聚焦时，输入期望跳转的页码后直接敲击回车进行跳转
若你输入页码大于分页器总页数，我们会自动为你跳转至最后一页
showQuickJumper于 v1.31后提供

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Pagination } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <div>

5

        <Pagination total={80} showQuickJumper style={{ marginBottom: '12px' }}></Pagination>

6

        <Pagination total={300} showQuickJumper></Pagination>

7

    </div>

8

);

Show Error

Auto Save

页码受控

传入 currentPage 后，分页器即为受控组件，一般配合 onPageChange 使用。当前激活页码完全取决于传入的 currentPage的 值

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

19

 

1

import { Pagination } from '@kousum/semi-ui-vue';

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

  const page = ref(3);

6

​

7

  function onPageChange(currentPage) {

8

    page.value = currentPage

9

  }

10

​

11

  return () => (

12

    <Pagination

13

      total={200}

14

      currentPage={page.value}

15

      onPageChange={onPageChange}>

16

    </Pagination>

17

  );

18

})

19

export default Demo;

Show Error

Auto Save

预设每页容量可选值

传入 pageSizeOpts 数组，指定切换每页容量的可选值

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

17

 

1

import { Pagination } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <div>

5

        <Pagination

6

            total={300}

7

            showSizeChanger

8

            style={{ marginBottom: '12px' }}

9

            pageSizeOpts={[50, 80, 90, 200]}>

10

        </Pagination>

11

        <Pagination

12

            total={300}

13

            showSizeChanger

14

            pageSizeOpts={[10, 20, 50, 200]}>

15

        </Pagination>

16

    </div>

17

);

Show Error

Auto Save

迷你版本

size 设置为 small

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Pagination } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Pagination total={90} size="small"></Pagination>

5

);

Show Error

Auto Save

开启 hoverShowPageSelect，可以 hover 页码快速切换（v1.27.0后提供）

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Pagination } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Pagination total={90} size="small" hoverShowPageSelect></Pagination>

5

);

Show Error

Auto Save

API 参考

属性	说明	类型	默认值	版本
className	类名	string
currentPage	当前页码	number
defaultCurrentPage	默认的当前页码	number
disabled	禁用	boolean	false	2.37.0
hideOnSinglePage	总页数小于 2 时，是否自动隐藏分页器，当 showSizeChanger 为true时，此开关不再生效	boolean	false
hoverShowPageSelect	hover 页码时是否展示切换页数的Select控件，仅当 size = 'small'时生效	boolean	false	1.27.0
nextText	下一页文本	string|ReactNode
pageSize	每页条数	number	10
pageSizeOpts	指定每页显示多少条	array	[10, 20, 40, 100]
popoverPosition	浮层方向，具体可见 Popover·API 参考·position	string	"bottomLeft"
popoverZIndex	浮层 z-index 值	number	1030
prevText	上一页文本	string|ReactNode
style	样式	object
size	尺寸	string
showTotal	是否显示总页数	boolean
showSizeChanger	是否显示切换页容量的 Select，size为small时不生效	boolean	false
showQuickJumper	是否显示切换页码的 Input	boolean	false	1.31.0
total	总条数	number	1
onChange	页码、每页容量变化时的回调函数	function(currentPage: number, pageSize: number)
onPageChange	页码变化的回调函数	function(currentPage: number)
onPageSizeChange	每页容量变化时的回调函数	function(pageSize: number)

Accessibility

ARIA

• aria-label: 描述组件内页码、前一页、后一页等元素的标签
• aria-current: 指向当前页的页码元素

设计变量

color

height

width

spacing

radius

font

animation

other

变量	默认值	用法
$color-pagination-text-default	var(--semi-color-text-2)	翻页器总页数文本颜色
$color-pagination_item-text-default	var(--semi-color-text-0)	翻页器 页码 文本颜色
$color-pagination_item-bg-default	transparent	翻页器 页码 背景颜色
$color-pagination_item-icon-default	var(--semi-color-tertiary)	翻页器 页码 图标颜色
$color-pagination_item-text-hover	var(--semi-color-text-0)	翻页器 页码 悬浮态文本颜色
$color-pagination_item-bg-hover	var(--semi-color-fill-0)	翻页器 页码 悬浮态背景颜色
$color-pagination_item-text-active	var(--semi-color-text-0)	翻页器 页码 按下态文字颜色
$color-pagination_item-bg-active	var(--semi-color-fill-1)	翻页器 页码 按下态背景颜色
$color-pagination_item-text-disabled	var(--semi-color-disabled-text)	翻页器 页码 禁用态文字颜色
$color-pagination_item-icon-disabled	var(--semi-color-disabled-text)	翻页器 页码 禁用态图标颜色

显示第 1 条-第 10 条，共 20 条

• 1
• 2

变量	默认值	用法
$height-pagination_item	32px	翻页器 页码高度

显示第 1 条-第 1 条，共 1 条

• 1

变量	默认值	用法
$width-pagination_item-minWidth	32px	翻页器 页码最小宽度
$width-pagination_item_small-minWidth	44px	迷你翻页器 页码最小宽度
$width-pagination_quickjump_input_width	50px	快速跳转输入框宽度
$width-pagination_item_border	0px	翻页器 页码 默认边框宽度

显示第 1 条-第 4 条，共 4 条

• 1

变量	默认值	用法
$spacing-pagination-padding	0	翻页器内边距
$spacing-pagination_small-paddingY	0	迷你翻页器垂直内边距
$spacing-pagination_small-paddingX	0	迷你翻页器水平内边距
$spacing-pagination_item-marginLeft	$spacing-extra-tight	翻页器页码左侧外边距
$spacing-pagination_item-marginRight	$spacing-extra-tight	翻页器页码右侧外边距
$spacing-pagination_item_small-margin	0	迷你翻页器页码外边距
$spacing-pagination_reset_list-paddingTop	$spacing-extra-tight
$spacing-pagination_reset_list-paddingBottom	$spacing-extra-tight
$spacing-pagination_quickjump_marginLeft	24px	快速跳转左侧外边距
$spacing-pagination_quickjump_input_marginLeft	4px	快速跳转输入框左侧外边距

显示第 1 条-第 10 条，共 11 条

• 1
• 2

变量	默认值	用法
$radius-pagination_item	var(--semi-border-radius-small)	翻页器页码圆角大小

显示第 1 条-第 1 条，共 1 条

• 1

变量	默认值	用法
$font-pagination_small-fontWeight	$font-weight-regular	迷你翻页器字重
$font-pagination_item-fontWeight	$font-weight-regular	翻页器页码字重
$font-pagination_item_active-fontWeight	$font-weight-bold	翻页器页码选中态字重
$font-pagination_quickjump_fontWeight	$font-weight-regular	快速跳转输入框字重

显示第 1 条-第 4 条，共 4 条

• 1

变量	默认值	用法
$transition_duration-pagination_item-bg	var(--semi-transition_duration-none)	翻页器页码-背景色-动画持续时间
$transition_function-pagination_item-bg	var(--semi-transition_function-easeIn)	翻页器页码-背景色-过渡曲线
$transition_delay-pagination_item-bg	var(--semi-transition_delay-none)	翻页器页码-背景色-延迟时间
$transition_duration-pagination_item-text	var(--semi-transition_duration-none)	翻页器页码文本-背景色-动画持续时间
$transition_function-pagination_item-text	var(--semi-transition_function-easeIn)	翻页器页码文本-背景色-过渡曲线
$transition_delay-pagination_item-text	var(--semi-transition_delay-none)	翻页器页码文本-背景色-延迟时间

显示第 1 条-第 6 条，共 6 条

• 1

变量	默认值	用法
$transform_scale-pagination_item	var(--semi-transform_scale-none)	翻页器item-放大

显示第 1 条-第 1 条，共 1 条

• 1

FAQ

• 为什么页数下拉选择器最多只有1,000,000条？
  因为创建列表时, 浏览器对Array.from()创建数组的大小存在限制; 同时为了兼顾Array.from()的开销，我们设定了1,000,000这个阈值。