!64 版本升级
* Merge branch 'dev' of gitee.com:JavaLionLi/plus-ui into ts * 升级依赖 * !61 fix: 删除重复环境变量ElUploadInstance * fix: 删除重复环境变量ElUploadInstance
This commit is contained in:
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="relative" :style="{ width: width }">
|
||||
<el-input v-model="modelValue" readonly @click="visible = !visible" placeholder="点击选择图标">
|
||||
<el-input v-model="modelValue" readonly placeholder="点击选择图标" @click="visible = !visible">
|
||||
<template #prepend>
|
||||
<svg-icon :icon-class="modelValue" />
|
||||
</template>
|
||||
@ -8,18 +8,18 @@
|
||||
|
||||
<el-popover shadow="none" :visible="visible" placement="bottom-end" trigger="click" :width="450">
|
||||
<template #reference>
|
||||
<div @click="visible = !visible" class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]">
|
||||
<div class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]" @click="visible = !visible">
|
||||
<i-ep-caret-top v-show="visible"></i-ep-caret-top>
|
||||
<i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-input class="p-2" v-model="filterValue" placeholder="搜索图标" clearable @input="filterIcons" />
|
||||
<el-input v-model="filterValue" class="p-2" placeholder="搜索图标" clearable @input="filterIcons" />
|
||||
|
||||
<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: modelValue == iconName }]" @click="selectedIcon(iconName)">
|
||||
<svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" />
|
||||
</li>
|
||||
</el-tooltip>
|
||||
@ -50,13 +50,11 @@ const filterValue = ref('');
|
||||
*/
|
||||
const filterIcons = () => {
|
||||
if (filterValue.value) {
|
||||
iconNames.value = icons.filter(iconName =>
|
||||
iconName.includes(filterValue.value)
|
||||
);
|
||||
iconNames.value = icons.filter((iconName) => iconName.includes(filterValue.value));
|
||||
} else {
|
||||
iconNames.value = icons;
|
||||
}
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 选择图标
|
||||
* @param iconName 选择的图标名称
|
||||
@ -64,12 +62,12 @@ const filterIcons = () => {
|
||||
const selectedIcon = (iconName: string) => {
|
||||
emit('update:modelValue', iconName);
|
||||
visible.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-scrollbar {
|
||||
max-height: calc(50vh - 100px)!important;
|
||||
max-height: calc(50vh - 100px) !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
@ -99,8 +97,8 @@ const selectedIcon = (iconName: string) => {
|
||||
}
|
||||
}
|
||||
.active {
|
||||
border-color: var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
border-color: var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user