From 7853470baae38e7dddc4d4e62b40722ae1ea3638 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Tue, 25 Apr 2023 06:43:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E5=9B=BE=E6=A0=87=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E7=BB=84=E4=BB=B6=E4=BD=BF=E7=94=A8=20`onCli?=
 =?UTF-8?q?ckOutside`=20=E6=9C=AA=E6=8E=92=E9=99=A4=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E5=BC=B9=E5=87=BA=E6=A1=86=E5=85=83=E7=B4=A0=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E8=BE=93=E5=85=A5=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 916bcd14e37c4950210f84bc5ab9725317b34540
---
 src/components/IconSelect/index.vue | 69 ++++++++++++++++-------------
 1 file changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index 1f8c57b4..ba8e787d 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -11,12 +11,13 @@ const inputValue = toRef(props, "modelValue");
 
 const visible = ref(false); // 弹窗显示状态
 
-const iconNames: string[] = []; // 所有的图标名称集合
+const allIconNames: string[] = []; // 所有的图标名称集合
 
 const filterValue = ref(""); // 筛选的值
 const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合
 
-const iconSelectorRef = ref(null);
+const iconSelectorRef = ref();
+const iconSelectorDialogRef = ref();
 /**
  * icon 加载
  */
@@ -24,9 +25,9 @@ function loadIcons() {
   const icons = import.meta.glob("../../assets/icons/*.svg");
   for (const icon in icons) {
     const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
-    iconNames.push(iconName);
+    allIconNames.push(iconName);
   }
-  filterIconNames.value = iconNames;
+  filterIconNames.value = allIconNames;
 }
 
 /**
@@ -34,11 +35,11 @@ function loadIcons() {
  */
 function handleFilter() {
   if (filterValue.value) {
-    filterIconNames.value = iconNames.filter((iconName) =>
+    filterIconNames.value = allIconNames.filter((iconName) =>
       iconName.includes(filterValue.value)
     );
   } else {
-    filterIconNames.value = iconNames;
+    filterIconNames.value = allIconNames;
   }
 }
 
@@ -53,7 +54,9 @@ function handleSelect(iconName: string) {
 /**
  * 点击容器外的区域关闭弹窗 VueUse onClickOutside
  */
-onClickOutside(iconSelectorRef, () => (visible.value = false));
+onClickOutside(iconSelectorRef, () => (visible.value = false), {
+  ignore: [iconSelectorDialogRef],
+});
 
 onMounted(() => {
   loadIcons();
@@ -91,32 +94,34 @@ onMounted(() => {
       </template>
 
       <!-- 下拉选择弹窗 -->
-      <el-input
-        class="p-2"
-        v-model="filterValue"
-        placeholder="搜索图标"
-        clearable
-        @input="handleFilter"
-      />
-      <el-divider border-style="dashed" />
+      <div ref="iconSelectorDialogRef">
+        <el-input
+          class="p-2"
+          v-model="filterValue"
+          placeholder="搜索图标"
+          clearable
+          @input="handleFilter"
+        />
+        <el-divider border-style="dashed" />
 
-      <el-scrollbar height="300px">
-        <ul class="icon-list">
-          <li
-            class="icon-item"
-            v-for="(iconName, index) in filterIconNames"
-            :key="index"
-            @click="handleSelect(iconName)"
-          >
-            <el-tooltip :content="iconName" placement="bottom" effect="light">
-              <svg-icon
-                color="var(--el-text-color-regular)"
-                :icon-class="iconName"
-              />
-            </el-tooltip>
-          </li>
-        </ul>
-      </el-scrollbar>
+        <el-scrollbar height="300px">
+          <ul class="icon-list">
+            <li
+              class="icon-item"
+              v-for="(iconName, index) in filterIconNames"
+              :key="index"
+              @click="handleSelect(iconName)"
+            >
+              <el-tooltip :content="iconName" placement="bottom" effect="light">
+                <svg-icon
+                  color="var(--el-text-color-regular)"
+                  :icon-class="iconName"
+                />
+              </el-tooltip>
+            </li>
+          </ul>
+        </el-scrollbar>
+      </div>
     </el-popover>
   </div>
 </template>