From 0e736c889f9cd3ca51c54becf81b6433549c4b78 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail>
Date: Fri, 5 May 2023 10:23:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B7=B2=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E5=9B=BE=E6=A0=87=E9=AB=98=E4=BA=AE=E5=9B=9E?=
 =?UTF-8?q?=E6=98=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IconSelect/index.vue | 45 +++++++++++++++--------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index 330c44f..22b9484 100644
--- a/src/components/IconSelect/index.vue
+++ b/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>
@@ -33,15 +33,15 @@
 import icons from '@/components/IconSelect/requireIcons';
 
 const props = defineProps({
-    modelValue: {
-        type: String,
-        require: true
-    },
-    width: {
-        type: String,
-        require: false,
-        default: '400px'
-    }
+  modelValue: {
+    type: String,
+    require: true
+  },
+  width: {
+    type: String,
+    require: false,
+    default: '400px'
+  }
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -55,22 +55,21 @@ const filterValue = ref('');
  * 筛选图标
  */
 const filterIcons = () => {
-    if (filterValue.value) {
-        iconNames.value = icons.filter(iconName =>
-            iconName.includes(filterValue.value)
-        );
-    } else {
-        iconNames.value = icons;
-    }
+  if (filterValue.value) {
+    iconNames.value = icons.filter(iconName =>
+      iconName.includes(filterValue.value)
+    );
+  } else {
+    iconNames.value = icons;
+  }
 }
-
 /**
  * 选择图标
  * @param iconName 选择的图标名称
  */
 const selectedIcon = (iconName: string) => {
-    emit('update:modelValue', iconName);
-    visible.value = false;
+  emit('update:modelValue', iconName);
+  visible.value = false;
 }
 </script>
 
@@ -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>