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

LiuHao

2023-05-05 0e736c889f9cd3ca51c54becf81b6433549c4b78

 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 @@
        iconNames.value = icons;
    }
}

/**
 * 选择图标
 * @param iconName 选择的图标名称
@@ -101,5 +100,9 @@
      transform: scaleX(1.1);
    }
  }
  .active {
      border-color: var(--el-color-primary);
      color: var(--el-color-primary);
    }
}
</style>