From 1c5a379134af731aad66f583266793ab7fb56f50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Fri, 15 Jul 2022 14:08:17 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=80(component):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=20icon-picker=20=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/iconPicker/index.less       | 11 ++-
 .../src/component/iconPicker/index.vue        | 67 ++++++-------------
 2 files changed, 26 insertions(+), 52 deletions(-)

diff --git a/package/component/src/component/iconPicker/index.less b/package/component/src/component/iconPicker/index.less
index 23806fc8..2a774ae5 100644
--- a/package/component/src/component/iconPicker/index.less
+++ b/package/component/src/component/iconPicker/index.less
@@ -66,19 +66,18 @@
 }
 
 .layui-iconpicker-list {
-  padding: 10px 10px 5px;
-  width: 320px;
+  width: 321px;
 }
 
 .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: 220px;
-  overflow-x: hidden;
+  max-height: 200px;
 }
 
 .layui-iconpicker-page {
diff --git a/package/component/src/component/iconPicker/index.vue b/package/component/src/component/iconPicker/index.vue
index 3c9c7988..068b2962 100644
--- a/package/component/src/component/iconPicker/index.vue
+++ b/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
-      class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split"
-    >
+    <div 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"
-        ><i class="layui-icon layui-icon-down layui-anim"></i
-      ></span>
+      <span class="layui-inline layui-iconpicker-suffix"><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
-            @input="search"
-            @clear="clear"
-            autocomplete="true"
-            :allow-clear="true"
-          >
+          <lay-input @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>
-            <li
-              v-for="icon in icones"
-              :key="icon"
-              :class="[selectedIcon === icon.class ? 'layui-this' : '']"
-              @click="selectIcon(icon.class)"
-            >
-              <i class="layui-icon" :class="[icon.class]"></i>
-              <p class="layui-elip">
-                {{ icon.name }}
-              </p>
-            </li>
-          </ul>
+          <lay-scroll style="height:200px;" thumbColor="rgb(238, 238, 238)">
+            <ul>
+              <li v-for="icon in icones" :key="icon" :class="[selectedIcon === icon.class ? 'layui-this' : '']"
+                @click="selectIcon(icon.class)">
+                <i class="layui-icon" :class="[icon.class]"></i>
+                <p class="layui-elip">
+                  {{ icon.name }}
+                </p>
+              </li>
+            </ul>
+          </lay-scroll>
         </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
-            ><a
-              href="javascript:;"
-              class="layui-laypage-prev"
-              :class="[currentPage === 1 ? 'layui-disabled' : '']"
-              @click="prev()"
-              ><i class="layui-icon layui-icon-left"></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>
+            <span class="layui-laypage-count">共 {{ total }} 个</span><a href="javascript:;" class="layui-laypage-prev"
+              :class="[currentPage === 1 ? 'layui-disabled' : '']" @click="prev()"><i
+                class="layui-icon layui-icon-left"></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>