admin/lx-admin-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
LiuHao 2023-05-05 10:23:41 +08:00
parent f5a21c9b6f
commit 0e736c889f
1 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/IconSelect/index.vue
View File

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