From e803274ba6a52c1b1ee6030c94164e775d025ba2 Mon Sep 17 00:00:00 2001
From: castle <castle@mymac>
Date: Mon, 27 Dec 2021 15:16:02 +0800
Subject: [PATCH] =?UTF-8?q?[=E4=BF=AE=E5=A4=8D][=E6=96=B0=E5=A2=9E]?=
 =?UTF-8?q?=E7=BB=99page=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0pages=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=EF=BC=8C=E7=94=A8=E4=BA=8E=E9=99=90=E5=AE=9A=E9=A1=B5?=
 =?UTF-8?q?=E6=95=B0=E8=BF=87=E5=A4=9A=E6=83=85=E5=86=B5=E4=B8=8B=E7=9A=84?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=98=BE=E7=A4=BA=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/page.md |  7 ++-
 src/module/page/index.vue             | 84 +++++++++++++++------------
 2 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/example/docs/zh-CN/components/page.md b/example/docs/zh-CN/components/page.md
index 51f60a7c..dcfd4231 100644
--- a/example/docs/zh-CN/components/page.md
+++ b/example/docs/zh-CN/components/page.md
@@ -127,7 +127,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-page :limit="limit" :total="total" :show-count="showCount" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
+  <lay-page :limit="limit" :total="9999" :show-count="showCount" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
 </template>
 
 <script>
@@ -136,8 +136,8 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const limit = ref(20)
-    const total = ref(100)
+    const limit = ref(5)
+    const total = ref(9999)
     const showCount = ref(true)
     const showPage = ref(true)
     const showLimit = ref(true)
@@ -207,6 +207,7 @@ export default {
 | showLimit   | 显示每页数量 | `false` |
 | showRefresh | 显示刷新按钮 | `false` |
 | showSkip    | 显示跳转     | `false` |
+| pages       | 显示切页按钮数量     | `10` |
 
 :::
 
diff --git a/src/module/page/index.vue b/src/module/page/index.vue
index 80bb23d7..c3e9b548 100644
--- a/src/module/page/index.vue
+++ b/src/module/page/index.vue
@@ -1,60 +1,56 @@
 <template>
   <div class="layui-box layui-laypage layui-laypage-default">
-    <span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span
-    ><a
+    <span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span>
+    <a
       href="javascript:;"
       class="layui-laypage-prev"
       :class="[currentPage === 1 ? 'layui-disabled' : '']"
       @click="prev()"
-      ><slot v-if="slots.prev" name="prev"></slot>
-      <template v-else>上一页</template></a
     >
+      <slot v-if="slots.prev" name="prev"></slot>
+      <template v-else>上一页</template>
+    </a>
     <template v-if="showPage">
       <template v-for="index of totalPage" :key="index">
-        <span v-if="index === currentPage" class="layui-laypage-curr"
-          ><em
-            class="layui-laypage-em"
-            :class="[theme ? 'layui-bg-' + theme : '']"
-          ></em
-          ><em>{{ index }}</em></span
-        >
-        <a v-else href="javascript:;" @click="jump(index)">
-          {{ index }}
-        </a>
+        <span v-if="index === currentPage" class="layui-laypage-curr">
+          <em class="layui-laypage-em" :class="[theme ? 'layui-bg-' + theme : '']"></em>
+          <em>{{ index }}</em>
+        </span>
+        <a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
       </template>
     </template>
 
     <a
       href="javascript:;"
       class="layui-laypage-next"
-      :class="[currentPage === totalPage ? 'layui-disabled' : '']"
+      :class="[currentPage === maxPage ? 'layui-disabled' : '']"
       @click="next()"
-      ><slot v-if="slots.next" name="next"></slot>
-      <template v-else>下一页</template></a
-    ><span v-if="showLimit" class="layui-laypage-limits"
-      ><select v-model="inlimit">
+    >
+      <slot v-if="slots.next" name="next"></slot>
+      <template v-else>下一页</template>
+    </a>
+    <span v-if="showLimit" class="layui-laypage-limits">
+      <select v-model="inlimit">
         <option value="10">10 条/页</option>
         <option value="20">20 条/页</option>
         <option value="30">30 条/页</option>
         <option value="40">40 条/页</option>
         <option value="50">50 条/页</option>
-      </select></span
-    ><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh"
-      ><i class="layui-icon layui-icon-refresh"></i></a
-    ><span v-if="showSkip" class="layui-laypage-skip"
-      >到第<input
-        v-model="currentPageShow"
-        type="number"
-        class="layui-input layui-input-number"
-      />页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
-        确定
-      </button></span
-    >
+      </select>
+    </span>
+    <a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
+      <i class="layui-icon layui-icon-refresh"></i>
+    </a>
+    <span v-if="showSkip" class="layui-laypage-skip">
+      到第
+      <input v-model="currentPageShow" type="number" class="layui-input layui-input-number" />页
+      <button type="button" class="layui-laypage-btn" @click="jumpPage()">确定</button>
+    </span>
   </div>
 </template>
 
 <script setup name="LayPage" lang="ts">
-import { defineProps, Ref, ref, watch, useSlots } from "vue";
+import { defineProps, Ref, ref, watch, useSlots, computed } from "vue";
 
 const slots = useSlots();
 
@@ -69,6 +65,7 @@ const props = withDefaults(
     showLimit?: boolean | string;
     showInput?: boolean | string;
     showRefresh?: boolean | string;
+    pages?: number
   }>(),
   {
     limit: 10,
@@ -79,11 +76,26 @@ const props = withDefaults(
     showLimit: true,
     showInput: false,
     showRefresh: false,
+    pages: 10
   }
 );
-
+const pages = props.pages / 2
 const inlimit = ref(props.limit);
-const totalPage = ref(Math.ceil(props.total / inlimit.value));
+const maxPage = ref(Math.ceil(props.total / props.limit));
+const totalPage = computed(() => {
+  let r: number[] = [], end = maxPage.value
+  if (currentPage.value <= pages) {
+    end = props.pages + 1
+  } else if (currentPage.value + pages > end) {
+
+  } else {
+    end = currentPage.value + pages
+  }
+  for (let i = currentPage.value > pages ? currentPage.value - pages : 1; i < end; i++) {
+    r.push(i)
+  }
+  return r;
+})
 const currentPage: Ref<number> = ref(1);
 const currentPageShow: Ref<number> = ref(currentPage.value);
 
@@ -97,7 +109,7 @@ const prev = function () {
 };
 
 const next = function () {
-  if (currentPage.value === totalPage.value) {
+  if (currentPage.value === maxPage.value) {
     return;
   }
   currentPage.value++;
@@ -113,7 +125,7 @@ const jumpPage = function () {
 
 watch(inlimit, function () {
   currentPage.value = 1;
-  totalPage.value = Math.ceil(props.total / inlimit.value);
+  maxPage.value = Math.ceil(props.total / inlimit.value);
 });
 
 watch(currentPage, function () {