20260816220132

code/fms/fms-vue/src/components/ui/demo/pagination.vue

@@ -0,0 +1,78 @@
+<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>