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

Former-commit-id: 916bcd14e37c4950210f84bc5ab9725317b34540

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,6 +94,7 @@ onMounted(() => {
       </template>
 
       <!-- 下拉选择弹窗 -->
+      <div ref="iconSelectorDialogRef">
         <el-input
           class="p-2"
           v-model="filterValue"
@@ -117,6 +121,7 @@ onMounted(() => {
             </li>
           </ul>
         </el-scrollbar>
+      </div>
     </el-popover>
   </div>
 </template>