From b4ff364b49ad2c2ac0ae3ec0094473e3def0af44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com>
Date: Sat, 9 Oct 2021 15:48:47 +0800
Subject: [PATCH] feat(page): add page component

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

diff --git a/docs/docs/zh-CN/components/page.md b/docs/docs/zh-CN/components/page.md
index d33998fb..a8709ebf 100644
--- a/docs/docs/zh-CN/components/page.md
+++ b/docs/docs/zh-CN/components/page.md
@@ -1,7 +1,7 @@
 ::: demo
 
 <template>
-  <lay-page></lay-page>
+  <lay-page limit=10 total=100></lay-page>
 </template>
 
 <script>
diff --git a/src/module/page/index.vue b/src/module/page/index.vue
index d339050e..0b32c0d0 100644
--- a/src/module/page/index.vue
+++ b/src/module/page/index.vue
@@ -1,26 +1,19 @@
 <template>
-  <div
-    class="layui-box layui-laypage layui-laypage-default"
-    id="layui-laypage-10"
-  >
+  <div class="layui-box layui-laypage layui-laypage-default">
     <span class="layui-laypage-count">共 {{ total }} 条</span
-    ><a
-      href="javascript:;"
-      class="layui-laypage-prev layui-disabled"
-      @click="prev"
+    ><a href="javascript:;" class="layui-laypage-prev" :class="[currentPage === 1 ? 'layui-disabled':'']" @click="prev()"
       >上一页</a
-    ><span class="layui-laypage-curr"
-      ><em class="layui-laypage-em"></em><em>1</em></span
     >
-    <a href="javascript:;" data-page="5">5</a>
-    <span class="layui-laypage-spr">…</span
-    ><a
-      href="javascript:;"
-      class="layui-laypage-last"
-      title="尾页"
-      data-page="10"
-      >10</a
-    ><a href="javascript:;" class="layui-laypage-next" @click="next()">下一页</a
+    <template v-for="index of totalPage" :key="index">
+      <span class="layui-laypage-curr" v-if="index === currentPage"
+        ><em class="layui-laypage-em"></em><em>{{ index }}</em></span
+      >
+      <a href="javascript:;" @click="jump(index)" v-else>
+        {{ index }}
+      </a>
+    </template>
+
+    <a href="javascript:;" class="layui-laypage-next" :class="[currentPage === totalPage ? 'layui-disabled':'']" @click="next()">下一页</a
     ><span class="layui-laypage-limits"
       ><select lay-ignore="">
         <option value="10" selected="">{{ limit }} 条/页</option>
@@ -41,8 +34,8 @@
     >
   </div>
 </template>
-
-<script setup name="LayPage" lang="ts">
+<script setup name="LayPage"></script>
+<script setup lang="ts">
 import { defineProps, ref } from 'vue'
 
 const props =
@@ -51,13 +44,24 @@ const props =
     limit: number
   }>()
 
-const current = ref(1)
+const totalPage = ref(props.total / props.limit)
+const currentPage = ref(1)
 
 const prev = function () {
-  current.value--
+  if(currentPage.value === 1) {
+    return
+  }
+  currentPage.value--
 }
 
 const next = function () {
-  current.value--
+  if(currentPage.value === totalPage.value) {
+    return
+  }
+  currentPage.value++
+}
+
+const jump = function (page: number) {
+  currentPage.value = page
 }
 </script>