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

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

@@ -1,7 +1,7 @@
 ::: demo
 
 <template>
-  <lay-page></lay-page>
+  <lay-page limit=20 total=100></lay-page>
 </template>
 
 <script>

docs/src/components/LaySearch.vue

@@ -9,9 +9,9 @@
       <input
         type="text"
         placeholder="请选择"
-        :value="name"
         class="layui-input layui-unselect"
         @input="change"
+        :value="name"
         style="
           background: rgba(255, 255, 255, 0.05);
           border: none;
@@ -20,10 +20,11 @@
       /><i class="layui-edge"></i>
     </div>
     <dl class="layui-anim layui-anim-upbit" style="">
-      <dd lay-value="" class="layui-select-tips">请选择</dd>
+      <dd v-if="menus.length <= 0" class="layui-select-tips">无内容</dd>
       <dd
-        v-for="data in datas"
+        v-else
-        lay-value=""
+        v-for="data in menus"
+        :value = "name"
         @click="jump(data)"
         :key="data"
         class="layui-select-tips"
@@ -47,7 +48,7 @@ const route = useRoute()
 const router = useRouter()
 
 const openState = ref(false)
-
+const menus = ref(props.datas)
 const name = ref('')
 
 const open = function () {
@@ -55,7 +56,48 @@ const open = function () {
 }
 
 const jump = function (data: any) {
-  router.push(data.path)
   name.value = data.title
+  router.push(data.path)
+}
+
+const change = function(e: any) {
+  name.value = e.target.value
+  if(e.target.value === ""){
+    menus.value = props.datas
+  }else{
+    menus.value = searchList(e.target.value, props.datas);
+  }
+}
+
+const searchList = function (str: String, container: any) {
+  var newList = []
+  var startChar = str.charAt(0)
+  var strLen = str.length
+  for (var i = 0; i < container.length; i++) {
+    var obj = container[i]
+    var isMatch = false
+    for (var p in obj) {
+      if (typeof obj[p] == 'function') {
+        obj[p]()
+      } else {
+        var curItem = ''
+        if (obj[p] != null) {
+          curItem = obj[p]
+        }
+        for (var j = 0; j < curItem.length; j++) {
+          if (curItem.charAt(j) == startChar) {
+            if (curItem.substring(j).substring(0, strLen) == str) {
+              isMatch = true
+              break
+            }
+          }
+        }
+      }
+    }
+    if (isMatch) {
+      newList.push(obj)
+    }
+  }
+  return newList
 }
 </script>

docs/src/layouts/Layout.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="width:100%;height:300px">
     <lay-layout>
-      <lay-header>
+      <lay-header style="background:#393D49">
         <lay-logo>
           <img src="../assets/logo.png" />
         </lay-logo>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "a component library for Vue 3 base on layui-vue",
   "main": "lib/layui-vue.umd.js",
   "module": "lib/layui-vue.es.js",

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
+  <div class="layui-box layui-laypage layui-laypage-default">
-    class="layui-box layui-laypage layui-laypage-default"
-    id="layui-laypage-10"
-  >
     <span class="layui-laypage-count">共 {{ total }} 条</span
-    ><a
+    ><a href="javascript:;" class="layui-laypage-prev" :class="[currentPage === 1 ? 'layui-disabled':'']" @click="prev()"
-      href="javascript:;"
-      class="layui-laypage-prev 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>
+    <template v-for="index of totalPage" :key="index">
-    <span class="layui-laypage-spr">…</span
+      <span class="layui-laypage-curr" v-if="index === currentPage"
-    ><a
+        ><em class="layui-laypage-em"></em><em>{{ index }}</em></span
-      href="javascript:;"
+      >
-      class="layui-laypage-last"
+      <a href="javascript:;" @click="jump(index)" v-else>
-      title="尾页"
+        {{ index }}
-      data-page="10"
+      </a>
-      >10</a
+    </template>
-    ><a href="javascript:;" class="layui-laypage-next" @click="next()">下一页</a
+
+    <a href="javascript:;" class="layui-laypage-next" :class="[currentPage === totalPage ? 'layui-disabled':'']" @click="next()">下一页</a
     ><span class="layui-laypage-limits"
-      ><select lay-ignore="">
+      ><select v-model="inlimit">
-        <option value="10" selected="">{{ limit }} 条/页</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"
       ><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"></script>
-<script setup name="LayPage" lang="ts">
+<script setup lang="ts">
-import { defineProps, ref } from 'vue'
+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>