79 lines
2.5 KiB
Vue
79 lines
2.5 KiB
Vue
<script setup>
|
||
import { computed, ref } from 'vue'
|
||
import Pagination from '../pagination/pagination.vue'
|
||
|
||
const paginationPage = ref(1)
|
||
const paginationSizeCurrent = ref(1)
|
||
const paginationSizeValue = ref(20)
|
||
const paginationJumpPage = ref(3)
|
||
const paginationSizeTotalPages = computed(() => Math.ceil(500 / paginationSizeValue.value))
|
||
</script>
|
||
|
||
<template>
|
||
<section class="showcase-section" aria-labelledby="pagination-title">
|
||
<div class="section-heading">
|
||
<p class="eyebrow">Components</p>
|
||
<h2 id="pagination-title">Pagination 分页</h2>
|
||
<p>页码窗口折叠、每页条数切换、快速跳转与总数显示，支持受控与非受控两种用法。</p>
|
||
</div>
|
||
|
||
<p class="demo-label">基础用法（非受控）</p>
|
||
<div class="demo-panel">
|
||
<Pagination :total="85" />
|
||
<Pagination :total="500" />
|
||
</div>
|
||
|
||
<p class="demo-label">受控模式（v-model:current）</p>
|
||
<div class="demo-panel demo-panel-column">
|
||
<Pagination v-model:current="paginationPage" :total="500" />
|
||
<p class="popover-demo-text">当前页：{{ paginationPage }}</p>
|
||
</div>
|
||
|
||
<p class="demo-label">每页条数切换（showSizeChanger）</p>
|
||
<div class="demo-panel demo-panel-column">
|
||
<Pagination
|
||
v-model:current="paginationSizeCurrent"
|
||
v-model:page-size="paginationSizeValue"
|
||
:total="500"
|
||
show-size-changer
|
||
/>
|
||
<p class="popover-demo-text">
|
||
每页 {{ paginationSizeValue }} 条，共 {{ paginationSizeTotalPages }} 页
|
||
</p>
|
||
</div>
|
||
|
||
<p class="demo-label">快速跳转（showQuickJumper）</p>
|
||
<div class="demo-panel">
|
||
<Pagination v-model:current="paginationJumpPage" :total="1000" show-quick-jumper />
|
||
</div>
|
||
|
||
<p class="demo-label">总数显示（showTotal 与自定义插槽）</p>
|
||
<div class="demo-panel demo-panel-column">
|
||
<Pagination :total="168" show-total />
|
||
<Pagination :total="168" show-total>
|
||
<template #showTotal="{ total, from, to }">
|
||
第 {{ from }}-{{ to }} 条，共 {{ total }} 条
|
||
</template>
|
||
</Pagination>
|
||
</div>
|
||
|
||
<p class="demo-label">禁用</p>
|
||
<div class="demo-panel">
|
||
<Pagination
|
||
v-model:current="paginationSizeCurrent"
|
||
:total="300"
|
||
disabled
|
||
show-size-changer
|
||
show-quick-jumper
|
||
show-total
|
||
/>
|
||
</div>
|
||
|
||
<p class="demo-label">单页隐藏（hideOnSinglePage）</p>
|
||
<div class="demo-panel">
|
||
<Pagination :total="8" hide-on-single-page />
|
||
<Pagination :total="8" />
|
||
</div>
|
||
</section>
|
||
</template>
|