fix: 🐛 图标选择器组件使用 `onClickOutside` 未排除下拉弹出框元素导致无法输入搜索

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>