🌀(component): 优化 icon-picker 显示

package/component/src/component/iconPicker/index.less

@@ -66,19 +66,18 @@
 }
 
 .layui-iconpicker-list {
-  padding: 10px 10px 5px;
+  width: 321px;
-  width: 320px;
 }
 
 .layui-iconpicker-list ul {
-  margin-right: -6px;
+  margin: 6px;
 }
 
 .layui-iconpicker-list li {
   vertical-align: top;
   display: inline-block;
   width: 60px;
-  margin: 0 5px 5px 0;
+  margin: 2.5px;
   padding: 5px;
   overflow: hidden;
   border: 1px solid #eee;
@@ -112,9 +111,7 @@
 }
 
 .layui-iconpicker-scroll .layui-iconpicker-list {
-  overflow: auto;
+  max-height: 200px;
-  max-height: 220px;
-  overflow-x: hidden;
 }
 
 .layui-iconpicker-page {

package/component/src/component/iconPicker/index.vue

@@ -10,6 +10,7 @@ import { Ref, ref } from "vue";
 import { LayIconList as icons } from "@layui/icons-vue";
 import LayDropdown from "../dropdown/index.vue";
 import LayInput from "../input/index.vue";
+import LayScroll from "../scroll/index.vue";
 
 export interface LayIconPickerProps {
   page?: boolean;
@@ -135,67 +136,43 @@ const searchList = (str: string, container: any) => {
 
 <template>
   <lay-dropdown ref="dropdownRef">
-    <div
+    <div class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split">
-      class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split"
-    >
       <div class="layui-inline layui-iconpicker-main">
         <i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
       </div>
-      <span class="layui-inline layui-iconpicker-suffix"
+      <span class="layui-inline layui-iconpicker-suffix"><i class="layui-icon layui-icon-down layui-anim"></i></span>
-        ><i class="layui-icon layui-icon-down layui-anim"></i
-      ></span>
     </div>
     <template #content>
       <div class="layui-iconpicker-view layui-iconpicker-scroll">
         <div v-if="showSearch" class="layui-iconpicker-search">
-          <lay-input
+          <lay-input @input="search" @clear="clear" autocomplete="true" :allow-clear="true">
-            @input="search"
-            @clear="clear"
-            autocomplete="true"
-            :allow-clear="true"
-          >
             <template #prefix>
               <i class="layui-icon layui-icon-search"></i>
             </template>
           </lay-input>
         </div>
         <div class="layui-iconpicker-list">
-          <ul>
+          <lay-scroll style="height:200px;" thumbColor="rgb(238, 238, 238)">
-            <li
+            <ul>
-              v-for="icon in icones"
+              <li v-for="icon in icones" :key="icon" :class="[selectedIcon === icon.class ? 'layui-this' : '']"
-              :key="icon"
+                @click="selectIcon(icon.class)">
-              :class="[selectedIcon === icon.class ? 'layui-this' : '']"
+                <i class="layui-icon" :class="[icon.class]"></i>
-              @click="selectIcon(icon.class)"
+                <p class="layui-elip">
-            >
+                  {{ icon.name }}
-              <i class="layui-icon" :class="[icon.class]"></i>
+                </p>
-              <p class="layui-elip">
+              </li>
-                {{ icon.name }}
+            </ul>
-              </p>
+          </lay-scroll>
-            </li>
-          </ul>
         </div>
         <div v-if="page" class="layui-iconpicker-page">
           <div id="layui-laypage-1" class="layui-laypage layui-laypage-default">
-            <span class="layui-laypage-count">共 {{ total }} 个</span
+            <span class="layui-laypage-count">共 {{ total }} 个</span><a href="javascript:;" class="layui-laypage-prev"
-            ><a
+              :class="[currentPage === 1 ? 'layui-disabled' : '']" @click="prev()"><i
-              href="javascript:;"
+                class="layui-icon layui-icon-left"></i></a><span class="layui-laypage-curr"><em
-              class="layui-laypage-prev"
+                class="layui-laypage-em"></em><em>{{ currentPage }} / {{ totalPage }}</em></span><span
-              :class="[currentPage === 1 ? 'layui-disabled' : '']"
+              class="layui-laypage-spr">…</span><a href="javascript:;" class="layui-laypage-last" title="尾页">14</a><a
-              @click="prev()"
+              href="javascript:;" :class="[currentPage === totalPage ? 'layui-disabled' : '']"
-              ><i class="layui-icon layui-icon-left"></i></a
+              class="layui-laypage-next" @click="next()"><i class="layui-icon layui-icon-right"></i></a>
-            ><span class="layui-laypage-curr"
-              ><em class="layui-laypage-em"></em
-              ><em>{{ currentPage }} / {{ totalPage }}</em></span
-            ><span class="layui-laypage-spr">…</span
-            ><a href="javascript:;" class="layui-laypage-last" title="尾页"
-              >14</a
-            ><a
-              href="javascript:;"
-              :class="[currentPage === totalPage ? 'layui-disabled' : '']"
-              class="layui-laypage-next"
-              @click="next()"
-              ><i class="layui-icon layui-icon-right"></i
-            ></a>
           </div>
         </div>
       </div>