docs(pager): optimize pager demos (#3612)

This commit is contained in:
gimmyhehe 2025-07-25 15:36:27 +08:00 committed by GitHub
parent 875322c4e4
commit 6b27c3076a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 11 additions and 37 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<tiny-pager mode="number" :page-size="5" :page-sizes="[5, 7, 10, 20, 50]" :total="100"> </tiny-pager> <tiny-pager mode="number" :page-size="20" :page-sizes="[10, 20, 50, 100]" :total="100"> </tiny-pager>
</template> </template>
<script setup> <script setup>
import { TinyPager, TinyModal } from '@opentiny/vue' import { TinyPager } from '@opentiny/vue'
</script> </script>

View File

@ -7,7 +7,7 @@ test('每页显示数量', async ({ page }) => {
const preview = page.locator('#page-size') const preview = page.locator('#page-size')
const pager = preview.locator('.tiny-pager') const pager = preview.locator('.tiny-pager')
const total = 100 const total = 100
const initPageSize = 5 const initPageSize = 20
const getPageCount = (pageSize: number) => String(Math.ceil(total / pageSize)) const getPageCount = (pageSize: number) => String(Math.ceil(total / pageSize))
const sizeChange = pager.locator('.tiny-pager__page-size') const sizeChange = pager.locator('.tiny-pager__page-size')
const sizeSelect = page.locator('.tiny-pager__selector') const sizeSelect = page.locator('.tiny-pager__selector')

View File

@ -1,9 +1,9 @@
<template> <template>
<tiny-pager mode="number" :page-size="5" :page-sizes="[5, 7, 10, 20, 50]" :total="100"> </tiny-pager> <tiny-pager mode="number" :page-size="20" :page-sizes="[10, 20, 50, 100]" :total="100"> </tiny-pager>
</template> </template>
<script> <script>
import { TinyPager, TinyModal } from '@opentiny/vue' import { TinyPager } from '@opentiny/vue'
export default { export default {
components: { components: {

View File

@ -27,7 +27,6 @@
:current-page="custPager.currentPage" :current-page="custPager.currentPage"
:page-size="custPager.pageSize" :page-size="custPager.pageSize"
:total="custPager.total" :total="custPager.total"
:page-sizes="[5, 10, 20, 50]"
@current-change="currentChange" @current-change="currentChange"
@size-change="sizeChange" @size-change="sizeChange"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"

View File

@ -27,7 +27,6 @@
:current-page="custPager.currentPage" :current-page="custPager.currentPage"
:page-size="custPager.pageSize" :page-size="custPager.pageSize"
:total="custPager.total" :total="custPager.total"
:page-sizes="[5, 10, 20, 50]"
@current-change="currentChange" @current-change="currentChange"
@size-change="sizeChange" @size-change="sizeChange"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"

View File

@ -1,11 +1,5 @@
<template> <template>
<tiny-pager <tiny-pager :popper-append-to-body="false" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
:popper-append-to-body="false"
layout="sizes,prev, pager, next"
:page-size="5"
:page-sizes="[5, 10, 20, 30, 40, 50, 100]"
:total="50"
></tiny-pager>
</template> </template>
<script setup> <script setup>

View File

@ -1,11 +1,5 @@
<template> <template>
<tiny-pager <tiny-pager :popper-append-to-body="false" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
:popper-append-to-body="false"
layout="sizes,prev, pager, next"
:page-size="5"
:page-sizes="[5, 10, 20, 30, 40, 50, 100]"
:total="50"
></tiny-pager>
</template> </template>
<script> <script>

View File

@ -1,11 +1,5 @@
<template> <template>
<tiny-pager <tiny-pager popper-class="custom-pager" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
popper-class="custom-pager"
layout="sizes,prev, pager, next"
:page-size="5"
:page-sizes="[5, 10, 20, 30, 40, 50, 100]"
:total="50"
></tiny-pager>
</template> </template>
<script setup> <script setup>

View File

@ -1,11 +1,5 @@
<template> <template>
<tiny-pager <tiny-pager popper-class="custom-pager" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
popper-class="custom-pager"
layout="sizes,prev, pager, next"
:page-size="5"
:page-sizes="[5, 10, 20, 30, 40, 50, 100]"
:total="50"
></tiny-pager>
</template> </template>
<script> <script>

View File

@ -1,4 +1,4 @@
<svg viewBox="0 8 24 24" xmlns="http://www.w3.org/2000/svg" <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
isSvg="true"> isSvg="true">
<path <path
d="M20.53 7.47a.75.75 0 0 0-.976-.073l-.084.073L12 14.939l-7.47-7.47a.75.75 0 0 0-.976-.072l-.084.073a.75.75 0 0 0-.073.976l.073.084 8 8a.75.75 0 0 0 .976.073l.084-.073 8-8a.75.75 0 0 0 0-1.06Z" d="M20.53 7.47a.75.75 0 0 0-.976-.073l-.084.073L12 14.939l-7.47-7.47a.75.75 0 0 0-.976-.072l-.084.073a.75.75 0 0 0-.073.976l.073.084 8 8a.75.75 0 0 0 .976.073l.084-.073 8-8a.75.75 0 0 0 0-1.06Z"

Before

Width:  |  Height:  |  Size: 315 B

After

Width:  |  Height:  |  Size: 315 B

View File

@ -1,4 +1,4 @@
<svg viewBox="0 -8 24 24" xmlns="http://www.w3.org/2000/svg" <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
isSvg="true"> isSvg="true">
<path <path
d="M3.47 16.53a.75.75 0 0 0 .976.073l.084-.073L12 9.061l7.47 7.47a.75.75 0 0 0 .976.072l.084-.073a.75.75 0 0 0 .073-.976l-.073-.084-8-8a.75.75 0 0 0-.976-.073l-.084.073-8 8a.75.75 0 0 0 0 1.06Z" d="M3.47 16.53a.75.75 0 0 0 .976.073l.084-.073L12 9.061l7.47 7.47a.75.75 0 0 0 .976.072l.084-.073a.75.75 0 0 0 .073-.976l-.073-.084-8-8a.75.75 0 0 0-.976-.073l-.084.073-8 8a.75.75 0 0 0 0 1.06Z"

Before

Width:  |  Height:  |  Size: 316 B

After

Width:  |  Height:  |  Size: 315 B