[新增] iconPicker 搜索功能

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

@@ -95,6 +95,34 @@ export default {
 
 :::
 
+::: demo
+
+<template>
+  <lay-container fluid>
+    <lay-row space="10">
+      <lay-col md="2" sm="6" xs="12"><div class="grid-demo">1</div></lay-col>
+      <lay-col md="2" sm="6" xs="12"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
+      <lay-col md="2" sm="6" xs="12"><div class="grid-demo">3</div></lay-col>
+      <lay-col md="2" sm="6" xs="12"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
+      <lay-col md="2" sm="6" xs="12"><div class="grid-demo">5</div></lay-col>
+      <lay-col md="2" sm="6" xs="12"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
+    </lay-row>
+  </lay-container>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 |  |  |  |  |
 |--|--|--|--|
 | xs | 尺寸 | 超小屏幕 (手机<768px) | 12 |

docs/docs/zh-CN/guide/changelog.md

@@ -2,6 +2,10 @@
 
 <template>
     <lay-timeline>
+        <lay-timeline-item title="0.0.13">
+        </lay-timeline-item>
+        <lay-timeline-item title="0.0.12">
+        </lay-timeline-item>
         <lay-timeline-item title="0.0.11">
         </lay-timeline-item>
         <lay-timeline-item title="0.0.10">

docs/src/styles/markdown.css

@@ -217,6 +217,7 @@ table td {
 
 .site-idea {
   margin: 30px 0;
+  margin-top: 16px;
   font-weight: 300;
 }
 

src/css/layui.css

@@ -4536,7 +4536,7 @@ body .layui-table-tips .layui-layer-content {
 }
 
 .layui-iconpicker-scroll .layui-iconpicker-list {
-	max-height: 194px;
+	max-height: 220px;
 	overflow: auto
 }
 

src/module/iconPicker/index.vue

@@ -22,6 +22,7 @@
             <input
               type="text"
               value=""
+              @input="search"
               placeholder="search"
               autocomplete="off"
               class="layui-input"
@@ -78,7 +79,7 @@
 </template>
 
 <script setup name="LayIconPicker" lang="ts">
-import { defineProps, Ref, ref } from 'vue'
+import { defineProps, Ref, ref, watch } from 'vue'
 import icons from '../resource/icons'
 
 const props = withDefaults(
@@ -103,8 +104,8 @@ const selectIcon = function (icon: String) {
 
 const icones: Ref = ref([])
 
-const total = icons.length
+const total = ref(icons.length)
-const totalPage = total / 12
+const totalPage = ref(total.value / 12)
 const currentPage: Ref = ref(1)
 
 if (props.page) {
@@ -132,4 +133,62 @@ const prev = function () {
   const end = start + 12
   icones.value = icons.slice(start, end)
 }
+
+const search = function (e: any) {
+  var text = e.target.value
+  currentPage.value = 1
+  const start = (currentPage.value - 1) * 12
+  const end = start + 12
+  if (text === '') {
+    if (props.page) {
+      icones.value = icons.slice(start, end)
+      total.value = icons.length
+      totalPage.value = Math.ceil(icons.length / 12)
+    } else {
+      icones.value = icons
+    }
+  } else {
+    if (props.page) {
+      icones.value = searchList(text, icons).slice(start, end)
+      total.value = searchList(text, icons).length
+      totalPage.value = Math.ceil(searchList(text, icons).length / 12)
+    } else {
+      icones.value = searchList(text, icons)
+    }
+  }
+}
+
+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) {
+              //如果从j开始的字符与str匹配，那ok
+              isMatch = true
+              break
+            }
+          }
+        }
+      }
+    }
+    if (isMatch) {
+      newList.push(obj)
+    }
+  }
+  return newList
+}
 </script>