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

Author: gimmyhehe

examples/sites/demos/pc/app/pager/page-size-composition-api.vue

@@ -1,7 +1,7 @@
 <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>
 
 <script setup>
-import { TinyPager, TinyModal } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 </script>

examples/sites/demos/pc/app/pager/page-size.spec.ts

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

examples/sites/demos/pc/app/pager/page-size.vue

@@ -1,9 +1,9 @@
 <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>
 
 <script>
-import { TinyPager, TinyModal } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {

examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue

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

examples/sites/demos/pc/app/pager/pager-in-grid.vue

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

examples/sites/demos/pc/app/pager/popper-append-to-body-composition-api.vue

@@ -1,11 +1,5 @@
 <template>
-  <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>
+  <tiny-pager :popper-append-to-body="false" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
 </template>
 
 <script setup>

examples/sites/demos/pc/app/pager/popper-append-to-body.vue

@@ -1,11 +1,5 @@
 <template>
-  <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>
+  <tiny-pager :popper-append-to-body="false" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
 </template>
 
 <script>

examples/sites/demos/pc/app/pager/popper-class-composition-api.vue

@@ -1,11 +1,5 @@
 <template>
-  <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>
+  <tiny-pager popper-class="custom-pager" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
 </template>
 
 <script setup>

examples/sites/demos/pc/app/pager/popper-class.vue

@@ -1,11 +1,5 @@
 <template>
-  <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>
+  <tiny-pager popper-class="custom-pager" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
 </template>
 
 <script>