feat(page): 完善 page 组件

docs/docs/zh-CN/components/page.md

@@ -1,7 +1,71 @@
 ::: demo
 
 <template>
-  <lay-page limit=20 total=100></lay-page>
+  <lay-page limit=20 total=100 showPage></lay-page>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-page limit=20 total=100 ></lay-page>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-page limit=20 total=100 showPage theme="red"></lay-page>
+  <br>
+  <lay-page limit=20 total=100 showPage theme="blue"></lay-page>
+  <br>
+  <lay-page limit=20 total=100 showPage theme="orange"></lay-page>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-page limit=20 total=100 showCount showPage showLimit showRefresh showSkip></lay-page>
 </template>
 
 <script>

src/css/layui.css

@@ -2493,6 +2493,15 @@ a cite {
 	width: 100%
 }
 
+.layui-input-number[type="number"]{
+  -moz-appearance: textfield;
+}
+
+.layui-input-number::-webkit-outer-spin-button,
+.layui-input-number::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
 .layui-input,
 .layui-select,
 .layui-textarea {

src/module/page/index.vue

@@ -1,63 +1,96 @@
 <template>
   <div class="layui-box layui-laypage layui-laypage-default">
-    <span class="layui-laypage-count">共 {{ total }} 条</span
+    <span class="layui-laypage-count" v-if="showCount">共 {{ total }} 条</span
-    ><a href="javascript:;" class="layui-laypage-prev" :class="[currentPage === 1 ? 'layui-disabled':'']" @click="prev()"
+    ><a
+      href="javascript:;"
+      class="layui-laypage-prev"
+      :class="[currentPage === 1 ? 'layui-disabled' : '']"
+      @click="prev()"
       >上一页</a
     >
-    <template v-for="index of totalPage" :key="index">
+    <template v-if="showPage">
-      <span class="layui-laypage-curr" v-if="index === currentPage"
+      <template v-for="index of totalPage" :key="index">
-        ><em class="layui-laypage-em"></em><em>{{ index }}</em></span
+        <span class="layui-laypage-curr" v-if="index === currentPage"
-      >
+          ><em
-      <a href="javascript:;" @click="jump(index)" v-else>
+            class="layui-laypage-em"
-        {{ index }}
+            :class="[theme ? 'layui-bg-' + theme : '']"
-      </a>
+          ></em
+          ><em>{{ index }}</em></span
+        >
+        <a href="javascript:;" @click="jump(index)" v-else>
+          {{ index }}
+        </a>
+      </template>
     </template>
 
-    <a href="javascript:;" class="layui-laypage-next" :class="[currentPage === totalPage ? 'layui-disabled':'']" @click="next()">下一页</a
+    <a
-    ><span class="layui-laypage-limits"
+      href="javascript:;"
+      class="layui-laypage-next"
+      :class="[currentPage === totalPage ? 'layui-disabled' : '']"
+      @click="next()"
+      >下一页</a
+    ><span class="layui-laypage-limits" v-if="showLimit"
       ><select v-model="inlimit">
-        <option value="10" >10 条/页</option>
+        <option value="10">10 条/页</option>
-        <option value="20" >20 条/页</option>
+        <option value="20">20 条/页</option>
-        <option value="30" >30 条/页</option>
+        <option value="30">30 条/页</option>
-        <option value="40" >40 条/页</option>
+        <option value="40">40 条/页</option>
-        <option value="50" >50 条/页</option>
+        <option value="50">50 条/页</option>
       </select></span
-    ><a href="javascript:;" data-page="1" class="layui-laypage-refresh"
+    ><a href="javascript:;" v-if="showRefresh" class="layui-laypage-refresh"
       ><i class="layui-icon layui-icon-refresh"></i></a
-    ><span class="layui-laypage-skip"
+    ><span class="layui-laypage-skip" v-if="showSkip"
-      >到第<input type="text" v-model="currentPageShow" class="layui-input" />页<button
+      >到第<input
-        type="button"
+        type="number"
-        class="layui-laypage-btn"
+        v-model="currentPageShow"
-        @click="jumpPage()"
+        class="layui-input layui-input-number"
-      >
+      />页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
         确定
-      </button></span>
+      </button></span
+    >
   </div>
 </template>
 <script setup name="LayPage"></script>
 <script setup lang="ts">
-import { defineProps, ref, watch } from 'vue'
+import { defineProps, Ref, ref, watch } from 'vue'
 
-const props =
+const props = withDefaults(
   defineProps<{
     total: number
     limit: number
-  }>()
+    theme: boolean
+    showPage: boolean
+    showSkip: boolean
+    showCount: boolean
+    showLimit: boolean
+    showInput: boolean
+    showRefresh: boolean
+  }>(),
+  {
+    limit: 10,
+    showSkip: false,
+    showPage: false,
+    showCount: false,
+    showLimit: false,
+    showInput: false,
+    showRefresh: false,
+  }
+)
 
-const inlimit= ref(props.limit)
+const inlimit = ref(props.limit)
-const totalPage = ref(Math.ceil(props.total / inlimit.value)) 
+const totalPage = ref(Math.ceil(props.total / inlimit.value))
-const currentPage = ref(1)
+const currentPage: Ref<number> = ref(1)
-const currentPageShow = ref(currentPage.value)
+const currentPageShow: Ref<number> = ref(currentPage.value)
 
 const prev = function () {
-  if(currentPage.value === 1) {
+  if (currentPage.value === 1) {
     return
   }
   currentPage.value--
 }
 
 const next = function () {
-  if(currentPage.value === totalPage.value) {
+  if (currentPage.value === totalPage.value) {
     return
   }
   currentPage.value++
@@ -67,19 +100,16 @@ const jump = function (page: number) {
   currentPage.value = page
 }
 
-const jumpPage = function() {
+const jumpPage = function () {
   currentPage.value = currentPageShow.value
 }
 
-watch(inlimit, function() {
+watch(inlimit, function () {
   currentPage.value = 1
   totalPage.value = Math.ceil(props.total / inlimit.value)
 })
 
-watch(currentPage, function() {
+watch(currentPage, function () {
   currentPageShow.value = currentPage.value
 })
-
-
-
 </script>