Merge branch 'master' of https://gitee.com/layui-vue/layui-vue

src/css/layui.css

@@ -1057,7 +1057,7 @@ a cite {
 	top: 0;
 	left: 0;
 	right: 0;
-	background-color: #393D49
+	background-color: #23262E
 }
 
 .layui-layout-admin .layui-side {

src/module/iconPicker/index.vue

@@ -175,9 +175,7 @@ const searchList = function (str: String, container: any) {
         }
         for (var j = 0; j < curItem.length; j++) {
           if (curItem.charAt(j) == startChar) {
-            //如果匹配起始字符,开始查找
             if (curItem.substring(j).substring(0, strLen) == str) {
-              //如果从j开始的字符与str匹配，那ok
               isMatch = true
               break
             }

src/module/page/index.vue

@@ -1,49 +1,42 @@
 <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>
-        <option value="20">20 条/页</option>
-        <option value="30">30 条/页</option>
-        <option value="40">40 条/页</option>
-        <option value="50">50 条/页</option>
+      ><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 href="javascript:;" data-page="1" class="layui-laypage-refresh"
       ><i class="layui-icon layui-icon-refresh"></i></a
     ><span class="layui-laypage-skip"
-      >到第<input type="text" min="1" value="1" class="layui-input" />页<button
+      >到第<input type="text" v-model="currentPageShow" class="layui-input" />页<button
         type="button"
         class="layui-laypage-btn"
+        @click="jumpPage()"
       >
         确定
-      </button></span
-    >
+      </button></span>
   </div>
 </template>
-
-<script setup name="LayPage" lang="ts">
-import { defineProps, ref } from 'vue'
+<script setup name="LayPage"></script>
+<script setup lang="ts">
+import { defineProps, ref, watch } from 'vue'
 
 const props =
   defineProps<{
@@ -51,13 +44,42 @@ const props =
     limit: number
   }>()
 
-const current = ref(1)
+const inlimit= ref(props.limit)
+const totalPage = ref(Math.ceil(props.total / inlimit.value)) 
+const currentPage = ref(1)
+const currentPageShow = ref(currentPage.value)
 
 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
+}
+
+const jumpPage = function() {
+  currentPage.value = currentPageShow.value
+}
+
+watch(inlimit, function() {
+  currentPage.value = 1
+  totalPage.value = Math.ceil(props.total / inlimit.value)
+})
+
+watch(currentPage, function() {
+  currentPageShow.value = currentPage.value
+})
+
+
+
 </script>