优化已选择下拉图标高亮回显

src/components/IconSelect/index.vue

@@ -2,7 +2,7 @@
   <div class="relative" :style="{ width: width }">
     <el-input v-model="modelValue" readonly @click="visible = !visible" placeholder="点击选择图标">
       <template #prepend>
-        <svg-icon :icon-class="modelValue as string"></svg-icon>
+        <svg-icon :icon-class="modelValue as string" />
       </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" @click="selectedIcon(iconName)">
+            <li :class="['icon-item', {active: modelValue == iconName}]" @click="selectedIcon(iconName)">
               <svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" />
             </li>
           </el-tooltip>
@@ -63,7 +63,6 @@ const filterIcons = () => {
     iconNames.value = icons;
   }
 }
-
 /**
  * 选择图标
  * @param iconName 选择的图标名称
@@ -101,5 +100,9 @@ const selectedIcon = (iconName: string) => {
       transform: scaleX(1.1);
     }
   }
+  .active {
+      border-color: var(--el-color-primary);
+      color: var(--el-color-primary);
+    }
 }
 </style>