使用场景
展示页码并让宿主管理当前页和每页数量。
基础用法与状态
下列示例只使用本入口的实际公开能力。
基础用法与状态
vue
<template>
<div class="demo-root-layout">
<AsamPagination
v-bind="{
total: 95,
pageSizes: [10, 20, 50],
layout: 'total, sizes, prev, pager, next',
size
}"
v-model:current-page="page"
v-model:page-size="pageSize"
/>
<label>
<span>密度</span>
<AsamSelect v-model="size">
<AsamOption v-for="value in sizes" :key="value" :label="value" :value="value">{{
value
}}</AsamOption>
</AsamSelect>
</label>
<p class="example-paragraph" role="status">第 {{ page }} 页，每页 {{ pageSize }} 条</p>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPaginationBasicDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamPagination } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];
const size = ref<AsamControlSize>('default');
const page = ref(1);
const pageSize = ref(10);
</script>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<div class="demo-root-layout">
<AsamPagination
v-bind="{
total: 95,
pageSizes: [10, 20, 50],
layout: 'total, sizes, prev, pager, next',
size
}"
v-model:current-page="page"
v-model:page-size="pageSize"
/>
<label>
<span>密度</span>
<AsamSelect v-model="size">
<AsamOption v-for="value in sizes" :key="value" :label="value" :value="value">{{
value
}}</AsamOption>
</AsamSelect>
</label>
<p class="example-paragraph" role="status">第 {{ page }} 页，每页 {{ pageSize }} 条</p>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamPaginationBasicDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamPagination } from '@asam-ui/ui';
const sizes = ['large', 'big', 'default', 'small'];
const size = ref('default');
const page = ref(1);
const pageSize = ref(10);
</script>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>使用约定
v-model:current-page 与 v-model:page-size 管理状态，total/pageCount、pageSizes、layout、disabled/background 控制显示。 完整说明。
完整使用场景
基础用法
设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。分页元素包括：prev（跳转到上一页的按钮）、next（跳转到下一页的按钮）、pager（页码列表）、jumper（跳转输入框）、total（总条目数）、sizes（用于设置每页条数的选择器）以及 ->（该符号之后的所有元素将被靠右对齐）。
基础用法
vue
<template>
<div class="example-pagination-block">
<div class="example-demonstration">页数较少时</div>
<AsamPagination layout="prev, pager, next" :total="50" />
</div>
<div class="example-pagination-block">
<div class="example-demonstration">页数超过七页时</div>
<AsamPagination layout="prev, pager, next" :total="1000" />
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPaginationCapBasicUsageDemo' });
import { AsamPagination } from '@asam-ui/ui';
</script>
<style scoped>
.example-pagination-block + .example-pagination-block {
margin-top: 10px;
}
.example-pagination-block .example-demonstration {
margin-bottom: 16px;
}
</style>vue
<template>
<div class="example-pagination-block">
<div class="example-demonstration">页数较少时</div>
<AsamPagination layout="prev, pager, next" :total="50" />
</div>
<div class="example-pagination-block">
<div class="example-demonstration">页数超过七页时</div>
<AsamPagination layout="prev, pager, next" :total="1000" />
</div>
</template>
<script setup>
defineOptions({ name: 'AsamPaginationCapBasicUsageDemo' });
import { AsamPagination } from '@asam-ui/ui';
</script>
<style scoped>
.example-pagination-block + .example-pagination-block {
margin-top: 10px;
}
.example-pagination-block .example-demonstration {
margin-bottom: 16px;
}
</style>
设置最大页码按钮数
默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过 pager-count 属性可以设置最大页码按钮数。
设置最大页码按钮数
vue
<template>
<AsamPagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" />
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPaginationCapNumberOfPagersDemo' });
import { AsamPagination } from '@asam-ui/ui';
</script>vue
<template>
<AsamPagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" />
</template>
<script setup>
defineOptions({ name: 'AsamPaginationCapNumberOfPagersDemo' });
import { AsamPagination } from '@asam-ui/ui';
</script>
带有背景色的分页
设置background属性可以为分页按钮添加背景色。
带有背景色的分页
vue
<template>
<AsamPagination background layout="prev, pager, next" :total="1000" />
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPaginationCapBackgroundColorDemo' });
import { AsamPagination } from '@asam-ui/ui';
</script>vue
<template>
<AsamPagination background layout="prev, pager, next" :total="1000" />
</template>
<script setup>
defineOptions({ name: 'AsamPaginationCapBackgroundColorDemo' });
import { AsamPagination } from '@asam-ui/ui';
</script>
小型分页
在空间有限的情况下，可以使用简单的小型分页。
通过size更改大小这是个 small的例子
小型分页
vue
<template>
<AsamPagination size="small" layout="prev, pager, next" :total="50" />
<AsamPagination size="small" background layout="prev, pager, next" :total="50" class="mt-4" />
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPaginationCapSmallPaginationDemo' });
import { AsamPagination } from '@asam-ui/ui';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.mt-4 {
margin-top: 1rem;
}
</style>vue
<template>
<AsamPagination size="small" layout="prev, pager, next" :total="50" />
<AsamPagination size="small" background layout="prev, pager, next" :total="50" class="mt-4" />
</template>
<script setup>
defineOptions({ name: 'AsamPaginationCapSmallPaginationDemo' });
import { AsamPagination } from '@asam-ui/ui';
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.mt-4 {
margin-top: 1rem;
}
</style>
当只有一页时隐藏分页
当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页。
当只有一页时隐藏分页
vue
<template>
<div>
<AsamSwitch
:model-value="value"
@update:model-value="
(nextValue) => {
if (typeof nextValue === 'boolean') value = nextValue;
}
"
/>
<hr class="my-4" />
<AsamPagination :hide-on-single-page="value" :total="5" layout="prev, pager, next" />
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPaginationCapAutoHidePaginationDemo' });
import { AsamSwitch, AsamPagination } from '@asam-ui/ui';
import { ref } from 'vue';
const value = ref(false);
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
</style>vue
<template>
<div>
<AsamSwitch
:model-value="value"
@update:model-value="
(nextValue) => {
if (typeof nextValue === 'boolean') value = nextValue;
}
"
/>
<hr class="my-4" />
<AsamPagination :hide-on-single-page="value" :total="5" layout="prev, pager, next" />
</div>
</template>
<script setup>
defineOptions({ name: 'AsamPaginationCapAutoHidePaginationDemo' });
import { AsamSwitch, AsamPagination } from '@asam-ui/ui';
import { ref } from 'vue';
const value = ref(false);
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
</style>
附加功能
根据场景需要，可以添加其他功能模块。
此示例是一个完整的用例。 完整说明。
附加功能
vue
<template>
<div class="flex items-center mb-4">
<AsamRadioGroup
:model-value="size"
class="mr-4"
@update:model-value="
(value) => {
if (
value === 'small' ||
value === 'default' ||
value === 'big' ||
value === 'large'
)
size = value;
}
"
>
<AsamRadioButton value="default">default</AsamRadioButton>
<AsamRadioButton value="large">large</AsamRadioButton>
<AsamRadioButton value="small">small</AsamRadioButton>
</AsamRadioGroup>
<div>
背景：
<AsamSwitch
:model-value="background"
class="ml-2"
@update:model-value="
(value) => {
if (typeof value === 'boolean') background = value;
}
"
/>
</div>
<div class="ml-4">
禁用状态：
<AsamSwitch
:model-value="disabled"
class="ml-2"
@update:model-value="
(value) => {
if (typeof value === 'boolean') disabled = value;
}
"
/>
</div>
</div>
<hr class="my-4" />
<div class="demo-pagination-block">
<div class="demonstration">项目总数</div>
<AsamPagination
v-model:current-page="currentPage1"
:page-size="100"
:size="size"
:disabled="disabled"
:background="background"
layout="total, prev, pager, next"
:total="1000"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<div class="demo-pagination-block">
<div class="demonstration">调整每页条数</div>
<AsamPagination
v-model:current-page="currentPage2"
v-model:page-size="pageSize2"
:page-sizes="[100, 200, 300, 400]"
:size="size"
:disabled="disabled"
:background="background"
layout="sizes, prev, pager, next"
:total="1000"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<div class="demo-pagination-block">
<div class="demonstration">跳转到</div>
<AsamPagination
v-model:current-page="currentPage3"
v-model:page-size="pageSize3"
:size="size"
:disabled="disabled"
:background="background"
layout="prev, pager, next, jumper"
:total="1000"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<div class="demo-pagination-block">
<div class="demonstration">组合效果</div>
<AsamPagination
v-model:current-page="currentPage4"
v-model:page-size="pageSize4"
:page-sizes="[100, 200, 300, 400]"
:size="size"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPaginationCapMoreElementsDemo' });
import { AsamRadioGroup, AsamRadioButton, AsamSwitch, AsamPagination } from '@asam-ui/ui';
import { ref } from 'vue';
import type { AsamControlSize } from '@asam-ui/ui';
const currentPage1 = ref(5);
const currentPage2 = ref(5);
const currentPage3 = ref(5);
const currentPage4 = ref(4);
const pageSize2 = ref(100);
const pageSize3 = ref(100);
const pageSize4 = ref(100);
const size = ref<AsamControlSize>('default');
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`);
};
</script>
<style scoped>
.demo-pagination-block + .demo-pagination-block {
margin-top: 10px;
}
.demo-pagination-block .demonstration {
margin-bottom: 16px;
}
</style>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.mb-4 {
margin-bottom: 1rem;
}
.mr-4 {
margin-right: 1rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-4 {
margin-left: 1rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
</style>vue
<template>
<div class="flex items-center mb-4">
<AsamRadioGroup
:model-value="size"
class="mr-4"
@update:model-value="
(value) => {
if (
value === 'small' ||
value === 'default' ||
value === 'big' ||
value === 'large'
)
size = value;
}
"
>
<AsamRadioButton value="default">default</AsamRadioButton>
<AsamRadioButton value="large">large</AsamRadioButton>
<AsamRadioButton value="small">small</AsamRadioButton>
</AsamRadioGroup>
<div>
背景：
<AsamSwitch
:model-value="background"
class="ml-2"
@update:model-value="
(value) => {
if (typeof value === 'boolean') background = value;
}
"
/>
</div>
<div class="ml-4">
禁用状态：
<AsamSwitch
:model-value="disabled"
class="ml-2"
@update:model-value="
(value) => {
if (typeof value === 'boolean') disabled = value;
}
"
/>
</div>
</div>
<hr class="my-4" />
<div class="demo-pagination-block">
<div class="demonstration">项目总数</div>
<AsamPagination
v-model:current-page="currentPage1"
:page-size="100"
:size="size"
:disabled="disabled"
:background="background"
layout="total, prev, pager, next"
:total="1000"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<div class="demo-pagination-block">
<div class="demonstration">调整每页条数</div>
<AsamPagination
v-model:current-page="currentPage2"
v-model:page-size="pageSize2"
:page-sizes="[100, 200, 300, 400]"
:size="size"
:disabled="disabled"
:background="background"
layout="sizes, prev, pager, next"
:total="1000"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<div class="demo-pagination-block">
<div class="demonstration">跳转到</div>
<AsamPagination
v-model:current-page="currentPage3"
v-model:page-size="pageSize3"
:size="size"
:disabled="disabled"
:background="background"
layout="prev, pager, next, jumper"
:total="1000"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<div class="demo-pagination-block">
<div class="demonstration">组合效果</div>
<AsamPagination
v-model:current-page="currentPage4"
v-model:page-size="pageSize4"
:page-sizes="[100, 200, 300, 400]"
:size="size"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamPaginationCapMoreElementsDemo' });
import { AsamRadioGroup, AsamRadioButton, AsamSwitch, AsamPagination } from '@asam-ui/ui';
import { ref } from 'vue';
const currentPage1 = ref(5);
const currentPage2 = ref(5);
const currentPage3 = ref(5);
const currentPage4 = ref(4);
const pageSize2 = ref(100);
const pageSize3 = ref(100);
const pageSize4 = ref(100);
const size = ref('default');
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val) => {
console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
console.log(`current page: ${val}`);
};
</script>
<style scoped>
.demo-pagination-block + .demo-pagination-block {
margin-top: 10px;
}
.demo-pagination-block .demonstration {
margin-bottom: 16px;
}
</style>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.mb-4 {
margin-bottom: 1rem;
}
.mr-4 {
margin-right: 1rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-4 {
margin-left: 1rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
</style>局部与全局挂载
切换公开挂载参数后，再打开浮层观察内容位于当前组件附近或挂载到 body。 开关显示当前模式，两个模式均可操作；关闭后可以再次切换。
局部与全局挂载
vue
<template>
<div ref="mountTarget" class="popup-stage demo-spacing-1" :class="{ local: !globalPopup }">
<div class="popup-mode">
<ContainerSwitch
v-model="globalPopup"
active-text="全局挂载到 body"
inactive-text="局部挂载到当前区域"
/>
</div>
<AsamPagination
v-bind="{
total: 95,
pageSizes: [10, 20, 50],
layout: 'total, sizes, prev, pager, next',
size
}"
v-model:current-page="page"
v-model:page-size="pageSize"
:teleported="globalPopup"
/>
<label>
<span>密度</span>
<AsamSelect v-model="size">
<AsamOption v-for="value in sizes" :key="value" :label="value" :value="value">{{
value
}}</AsamOption>
</AsamSelect>
</label>
<p class="example-paragraph" role="status">第 {{ page }} 页，每页 {{ pageSize }} 条</p>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPaginationBasicDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamPagination } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];
const size = ref<AsamControlSize>('default');
const page = ref(1);
const pageSize = ref(10);
import { ref as containerRef } from 'vue';
import { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';
const globalPopup = containerRef(true);
const mountTarget = containerRef<HTMLElement>();
</script>
<style scoped>
.popup-stage {
position: relative;
isolation: isolate;
min-height: 140px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode {
margin-bottom: var(--asam-space-lg);
}
</style>
<style scoped>
.demo-spacing-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<div ref="mountTarget" class="popup-stage demo-spacing-1" :class="{ local: !globalPopup }">
<div class="popup-mode">
<ContainerSwitch
v-model="globalPopup"
active-text="全局挂载到 body"
inactive-text="局部挂载到当前区域"
/>
</div>
<AsamPagination
v-bind="{
total: 95,
pageSizes: [10, 20, 50],
layout: 'total, sizes, prev, pager, next',
size
}"
v-model:current-page="page"
v-model:page-size="pageSize"
:teleported="globalPopup"
/>
<label>
<span>密度</span>
<AsamSelect v-model="size">
<AsamOption v-for="value in sizes" :key="value" :label="value" :value="value">{{
value
}}</AsamOption>
</AsamSelect>
</label>
<p class="example-paragraph" role="status">第 {{ page }} 页，每页 {{ pageSize }} 条</p>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamPaginationBasicDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamPagination } from '@asam-ui/ui';
const sizes = ['large', 'big', 'default', 'small'];
const size = ref('default');
const page = ref(1);
const pageSize = ref(10);
import { ref as containerRef } from 'vue';
import { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';
const globalPopup = containerRef(true);
const mountTarget = containerRef();
</script>
<style scoped>
.popup-stage {
position: relative;
isolation: isolate;
min-height: 140px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode {
margin-bottom: var(--asam-space-lg);
}
</style>
<style scoped>
.demo-spacing-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>API
属性 AsamPaginationProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
small | 是否使用小型分页样式 | boolean | undefined | false |
popperClass | 每页显示个数选择器的下拉框类名 | AsamPaginationProps["popperClass"] | — |
popperStyle | 每页显示个数选择器的下拉框样式 | (AsamPaginationProps)["popperStyle"] | — |
teleported | 是否将下拉菜单teleport至 body | (AsamPaginationProps)["teleported"] | false |
disabled | 是否禁用分页 | boolean | undefined | false |
layout | 组件布局，子组件名用逗号分隔 | string | undefined | 'prev, pager, next' |
total | 总条目数 | number | undefined | — |
currentPage | 当前页数 | number | undefined | — |
pageSize | 每页显示条目个数 | number | undefined | — |
defaultPageSize | 每页默认的条目个数，不设置时默认为10 | number | undefined | — |
pageCount | 总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | number | undefined | — |
pagerCount | 设置最大页码按钮数。页码按钮的数量，当总页数超过该值时会折叠 | number | undefined | — |
defaultCurrentPage | 当前页数的默认初始值，不设置时默认为 1 | number | undefined | — |
pageSizes | 每页显示个数选择器的选项设置 | number[] | undefined | () => [10, 20, 30, 50] |
prevText | 替代图标显示的上一页文字 | string | undefined | — |
prevIcon | 上一页的图标， 比 prev-text 优先级更高 | (AsamPaginationProps)["prevIcon"] | — |
nextText | 替代图标显示的下一页文字 | string | undefined | — |
nextIcon | 下一页的图标， 比 next-text 优先级更低 | (AsamPaginationProps)["nextIcon"] | — |
background | 是否为分页按钮添加背景色 | boolean | undefined | false |
hideOnSinglePage | 只有一页时是否隐藏 | boolean | undefined | false |
appendSizeTo | 下拉框挂载到哪个 DOM 元素 | string | undefined | — |
size | 分页大小 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
事件 AsamPaginationEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:current-page | — | [value: number] | — |
update:page-size | — | [value: number] | — |
size-change | — | [value: number] | — |
current-change | — | [value: number] | — |
prev-click | — | [value: number] | — |
next-click | — | [value: number] | — |
change | — | [currentPage: number, pageSize: number] | — |
update:currentPage | — | [value: number] | — |
update:pageSize | — | [value: number] | — |
page-change | — | [value: number] | — |
page-size-change | — | [value: number] | — |
插槽 AsamPaginationSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => VNode[]) | undefined | — |
类型 AsamPaginationPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
small | — | boolean | undefined | — |
popperClass | — | AsamPaginationProps["popperClass"] | — |
popperStyle | — | (AsamPaginationPropsPublic)["popperStyle"] | — |
teleported | — | (AsamPaginationPropsPublic)["teleported"] | — |
disabled | — | boolean | undefined | — |
layout | — | string | undefined | — |
total | — | number | undefined | — |
currentPage | — | number | undefined | — |
pageSize | — | number | undefined | — |
defaultPageSize | — | number | undefined | — |
pageCount | — | number | undefined | — |
pagerCount | — | number | undefined | — |
defaultCurrentPage | — | number | undefined | — |
pageSizes | — | number[] | undefined | — |
prevText | — | string | undefined | — |
prevIcon | — | (AsamPaginationPropsPublic)["prevIcon"] | — |
nextText | — | string | undefined | — |
nextIcon | — | (AsamPaginationPropsPublic)["nextIcon"] | — |
background | — | boolean | undefined | — |
hideOnSinglePage | — | boolean | undefined | — |
appendSizeTo | — | string | undefined | — |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
用法与契约补充说明
使用约定
v-model:current-page 与 v-model:page-size 管理状态，total/pageCount、pageSizes、layout、disabled/background 控制显示。基础 current-change/size-change/change 和 ASAM page-change/page-size-change 按公开事件使用。size 接受 large/big/default/small 并继承上下文；不要同时给模型配置互相冲突的静态值。它只改变分页状态，实际数据请求由宿主处理。
附加功能
此示例是一个完整的用例。使用了 size-change 和 current-change 事件来处理页码大小和当前页变动时候触发的事件。 page-sizes接受一个整数类型的数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400] 表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
关联组件
参数与事件补充说明
参数与事件说明
small
必填：否；声明来源：上游声明。
small 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperClass
必填：否；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
popperStyle
必填：否；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
teleported
必填：否；声明来源：上游声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
layout
必填：否；声明来源：上游声明。
默认值与来源
'prev, pager, next'（源码表达式；ASAM 声明）固定上游文档默认：prev, pager, next, jumper, ->, total（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：(
['prev', 'pager', 'next', 'jumper', '->', 'total'] as LayoutKey[]
).join(', ')（2.14.7；源码事实，未作为 ASAM 运行实测）
total
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
currentPage
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
pageSize
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
defaultPageSize
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
pageCount
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
pagerCount
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：7（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：7（2.14.7；源码事实，未作为 ASAM 运行实测）
defaultCurrentPage
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
pageSizes
必填：否；声明来源：上游声明。
默认值与来源
() => [10, 20, 30, 50]（源码表达式；ASAM 声明）固定上游文档默认：[10, 20, 30, 40, 50, 100]（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => mutable([10, 20, 30, 40, 50, 100] as const)（2.14.7；源码事实，未作为 ASAM 运行实测）
prevText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
prevIcon
必填：否；声明来源：上游声明。
prevIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamPaginationProps)["prevIcon"]>, (...args: never[]) => unknown>>[1]): any
prevIcon.__isFragment:undefined— 依赖声明prevIcon.__isTeleport:undefined— 依赖声明prevIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：ArrowLeft（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：() => ArrowLeft（2.14.7；源码事实，未作为 ASAM 运行实测）
nextText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
nextIcon
必填：否；声明来源：上游声明。
nextIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamPaginationProps)["nextIcon"]>, (...args: never[]) => unknown>>[1]): any
nextIcon.__isFragment:undefined— 依赖声明nextIcon.__isTeleport:undefined— 依赖声明nextIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：ArrowRight（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：() => ArrowRight（2.14.7；源码事实，未作为 ASAM 运行实测）
background
必填：否；声明来源：上游声明。
background 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
hideOnSinglePage
必填：否；声明来源：上游声明。
hideOnSinglePage 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
appendSizeTo
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
AsamPaginationProps 公开类型视图
ts
import type { Attrs } from 'vue';
import type { AsamPaginationProps, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamPaginationProps
type PublicContract = {
readonly "small"?: boolean | undefined;
readonly "popperClass"?: AsamPaginationProps["popperClass"];
readonly "popperStyle"?: (AsamPaginationProps)["popperStyle"];
readonly "teleported"?: (AsamPaginationProps)["teleported"];
readonly "disabled"?: boolean | undefined;
readonly "layout"?: string | undefined;
readonly "total"?: number | undefined;
readonly "currentPage"?: number | undefined;
readonly "pageSize"?: number | undefined;
readonly "defaultPageSize"?: number | undefined;
readonly "pageCount"?: number | undefined;
readonly "pagerCount"?: number | undefined;
readonly "defaultCurrentPage"?: number | undefined;
readonly "pageSizes"?: number[] | undefined;
readonly "prevText"?: string | undefined;
readonly "prevIcon"?: (AsamPaginationProps)["prevIcon"];
readonly "nextText"?: string | undefined;
readonly "nextIcon"?: (AsamPaginationProps)["nextIcon"];
readonly "background"?: boolean | undefined;
readonly "hideOnSinglePage"?: boolean | undefined;
readonly "appendSizeTo"?: string | undefined;
"size"?: AsamControlSize | undefined;
};参数与事件说明
update:current-page
必填：是；声明来源：ASAM 声明。
update:page-size
必填：是；声明来源：ASAM 声明。
size-change
必填：是；声明来源：ASAM 声明。
current-change
必填：是；声明来源：ASAM 声明。
prev-click
必填：是；声明来源：ASAM 声明。
next-click
必填：是；声明来源：ASAM 声明。
change
必填：是；声明来源：ASAM 声明。
update:currentPage
必填：是；声明来源：ASAM 声明。
update:pageSize
必填：是；声明来源：ASAM 声明。
page-change
必填：是；声明来源：ASAM 声明。
page-size-change
必填：是；声明来源：ASAM 声明。
AsamPaginationEmits 公开类型视图
ts
import type { AsamPaginationEmits } from '@asam-ui/ui';
// AsamPaginationEmits
type PublicContract = {
"update:current-page": [value: number];
"update:page-size": [value: number];
"size-change": [value: number];
"current-change": [value: number];
"prev-click": [value: number];
"next-click": [value: number];
"change": [currentPage: number, pageSize: number];
"update:currentPage": [value: number];
"update:pageSize": [value: number];
"page-change": [value: number];
"page-size-change": [value: number];
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[]
AsamPaginationSlots 公开类型视图
ts
import type { VNode } from 'vue';
import type { AsamPaginationSlots } from '@asam-ui/ui';
// AsamPaginationSlots
type PublicContract = {
"default"?: (() => VNode[]) | undefined;
};用于回调、渲染器数据和组件专用配置的具名基础类型。
参数与事件说明
small
必填：否；声明来源：上游声明。
small 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
popperClass
必填：否；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
popperStyle
必填：否；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
teleported
必填：否；声明来源：上游声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
layout
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：(
['prev', 'pager', 'next', 'jumper', '->', 'total'] as LayoutKey[]
).join(', ')（2.14.7；源码事实，未作为 ASAM 运行实测）
total
必填：否；声明来源：上游声明。
currentPage
必填：否；声明来源：上游声明。
pageSize
必填：否；声明来源：上游声明。
defaultPageSize
必填：否；声明来源：上游声明。
pageCount
必填：否；声明来源：上游声明。
pagerCount
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：7（2.14.7；源码事实，未作为 ASAM 运行实测）
defaultCurrentPage
必填：否；声明来源：上游声明。
pageSizes
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码工厂（未执行）：() => mutable([10, 20, 30, 40, 50, 100] as const)（2.14.7；源码事实，未作为 ASAM 运行实测）
prevText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
prevIcon
必填：否；声明来源：上游声明。
prevIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamPaginationPropsPublic)["prevIcon"]>, (...args: never[]) => unknown>>[1]): any
prevIcon.__isFragment:undefined— 依赖声明prevIcon.__isTeleport:undefined— 依赖声明prevIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游源码默认表达式：() => ArrowLeft（2.14.7；源码事实，未作为 ASAM 运行实测）
nextText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
nextIcon
必填：否；声明来源：上游声明。
nextIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamPaginationPropsPublic)["nextIcon"]>, (...args: never[]) => unknown>>[1]): any
nextIcon.__isFragment:undefined— 依赖声明nextIcon.__isTeleport:undefined— 依赖声明nextIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游源码默认表达式：() => ArrowRight（2.14.7；源码事实，未作为 ASAM 运行实测）
background
必填：否；声明来源：上游声明。
background 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
hideOnSinglePage
必填：否；声明来源：上游声明。
hideOnSinglePage 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
appendSizeTo
必填：否；声明来源：上游声明。
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
AsamPaginationPropsPublic 公开类型视图
ts
import type { Attrs } from 'vue';
import type { AsamPaginationPropsPublic, AsamPaginationProps, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamPaginationPropsPublic
type PublicContract = {
readonly "small"?: boolean | undefined;
readonly "popperClass"?: AsamPaginationProps["popperClass"];
readonly "popperStyle"?: (AsamPaginationPropsPublic)["popperStyle"];
readonly "teleported"?: (AsamPaginationPropsPublic)["teleported"];
readonly "disabled"?: boolean | undefined;
readonly "layout"?: string | undefined;
readonly "total"?: number | undefined;
readonly "currentPage"?: number | undefined;
readonly "pageSize"?: number | undefined;
readonly "defaultPageSize"?: number | undefined;
readonly "pageCount"?: number | undefined;
readonly "pagerCount"?: number | undefined;
readonly "defaultCurrentPage"?: number | undefined;
readonly "pageSizes"?: number[] | undefined;
readonly "prevText"?: string | undefined;
readonly "prevIcon"?: (AsamPaginationPropsPublic)["prevIcon"];
readonly "nextText"?: string | undefined;
readonly "nextIcon"?: (AsamPaginationPropsPublic)["nextIcon"];
readonly "background"?: boolean | undefined;
readonly "hideOnSinglePage"?: boolean | undefined;
readonly "appendSizeTo"?: string | undefined;
"size"?: AsamControlSize | undefined;
};