feat(page): 完善 page 组件

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

@@ -1,5 +1,25 @@
 ::: demo
 
+<template>
+  <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>
@@ -17,3 +37,47 @@ export default {
 </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>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</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,20 +1,35 @@
 <template>
   <div class="layui-box layui-laypage layui-laypage-default">
-    <span class="layui-laypage-count">共 {{ total }} 条</span
-    ><a href="javascript:;" class="layui-laypage-prev" :class="[currentPage === 1 ? 'layui-disabled':'']" @click="prev()"
+    <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
     >
+    <template v-if="showPage">
       <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
+          ><em
+            class="layui-laypage-em"
+            :class="[theme ? 'layui-bg-' + theme : '']"
+          ></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
-    ><span class="layui-laypage-limits"
+    <a
+      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="20">20 条/页</option>
@@ -22,32 +37,50 @@
         <option value="40">40 条/页</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"
-      >到第<input type="text" v-model="currentPageShow" class="layui-input" />页<button
-        type="button"
-        class="layui-laypage-btn"
-        @click="jumpPage()"
-      >
+    ><span class="layui-laypage-skip" v-if="showSkip"
+      >到第<input
+        type="number"
+        v-model="currentPageShow"
+        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 totalPage = ref(Math.ceil(props.total / inlimit.value))
-const currentPage = ref(1)
-const currentPageShow = ref(currentPage.value)
+const currentPage: Ref<number> = ref(1)
+const currentPageShow: Ref<number> = ref(currentPage.value)
 
 const prev = function () {
   if (currentPage.value === 1) {
@@ -79,7 +112,4 @@ watch(inlimit, function() {
 watch(currentPage, function () {
   currentPageShow.value = currentPage.value
 })
-
-
-
 </script>