菜单图标可输入

src/components/IconSelect/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="relative" :style="{ 'width': width }">
-    <el-input v-model="modelValue" placeholder="点击选择图标" @click="visible = !visible">
+    <el-input v-model="icon" placeholder="点击选择图标" @click="visible = !visible" @change="selectedIcon">
       <template #prepend>
-        <svg-icon :icon-class="modelValue" />
+        <svg-icon :icon-class="icon" />
       </template>
     </el-input>
 
@@ -19,7 +19,7 @@
       <el-scrollbar height="w-[200px]">
         <ul class="icon-list">
           <el-tooltip v-for="(iconName, index) in iconNames" :key="index" :content="iconName" placement="bottom" effect="light">
-            <li :class="['icon-item', { active: modelValue == iconName }]" @click="selectedIcon(iconName)">
+            <li :class="['icon-item', { active: icon == iconName }]" @click="selectedIcon(iconName)">
               <svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" />
             </li>
           </el-tooltip>
@@ -37,10 +37,16 @@ const props = defineProps({
   modelValue: propTypes.string.isRequired,
   width: propTypes.string.def('400px')
 });
+const icon = ref();
+watch(
+  () => props.modelValue,
+  () => {
+  icon.value = props.modelValue;
+}, {immediate: true})
 
 const emit = defineEmits(['update:modelValue']);
 const visible = ref(false);
-const { modelValue, width } = toRefs(props);
+const { width } = toRefs(props);
 const iconNames = ref<string[]>(icons);
 
 const filterValue = ref('');