refactor: ♻️ 图标选择组件代码重构
This commit is contained in:
hxr
parent
b3faed84cd
commit
3686f45a6a
|
|
@ -1,3 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<div ref="iconSelectRef" :style="'width:' + width" class="relative">
|
||||||
|
<el-input
|
||||||
|
v-model="inputValue"
|
||||||
|
readonly
|
||||||
|
placeholder="点击选择图标"
|
||||||
|
@click="visible = !visible"
|
||||||
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<svg-icon :icon-class="inputValue" />
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<el-popover
|
||||||
|
:visible="visible"
|
||||||
|
placement="bottom-end"
|
||||||
|
trigger="click"
|
||||||
|
:width="width"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<div
|
||||||
|
class="cursor-pointer text-[#999] absolute-tr height-[32px] leading-[32px] px-1"
|
||||||
|
@click="visible = !visible"
|
||||||
|
>
|
||||||
|
<i-ep-caret-top v-show="visible" />
|
||||||
|
<i-ep-caret-bottom v-show="!visible" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 下拉选择弹窗 -->
|
||||||
|
<div ref="iconSelectDialogRef">
|
||||||
|
<el-input
|
||||||
|
v-model="filterValue"
|
||||||
|
placeholder="搜索图标"
|
||||||
|
clearable
|
||||||
|
@input="handleFilter"
|
||||||
|
/>
|
||||||
|
<el-divider border-style="dashed" />
|
||||||
|
|
||||||
|
<el-scrollbar height="300px">
|
||||||
|
<ul class="flex flex-wrap">
|
||||||
|
<li
|
||||||
|
v-for="(iconName, index) in filterIconNames"
|
||||||
|
:key="index"
|
||||||
|
class="p-2 border border-solid border-gray-300 cursor-pointer hover:border-color-[var(--el-color-primary)] hover:text-[var(--el-color-primary)] hover:scale-110 hover:transition-all mt-1 ml-1"
|
||||||
|
@click="handleSelect(iconName)"
|
||||||
|
>
|
||||||
|
<el-tooltip :content="iconName" placement="bottom" effect="light">
|
||||||
|
<svg-icon :icon-class="iconName" />
|
||||||
|
</el-tooltip>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: {
|
modelValue: {
|
||||||
|
|
@ -5,10 +63,16 @@ const props = defineProps({
|
||||||
require: false,
|
require: false,
|
||||||
default: "",
|
default: "",
|
||||||
},
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
require: false,
|
||||||
|
default: "500px",
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue"]);
|
const emit = defineEmits(["update:modelValue"]);
|
||||||
const inputValue = toRef(props, "modelValue");
|
const inputValue = toRef(props, "modelValue");
|
||||||
|
const width = toRef(props, "width");
|
||||||
|
|
||||||
const visible = ref(false); // 弹窗显示状态
|
const visible = ref(false); // 弹窗显示状态
|
||||||
|
|
||||||
|
|
@ -17,19 +81,8 @@ const allIconNames: string[] = []; // 所有的图标名称集合
|
||||||
const filterValue = ref(""); // 筛选的值
|
const filterValue = ref(""); // 筛选的值
|
||||||
const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合
|
const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合
|
||||||
|
|
||||||
const iconSelectorRef = ref();
|
const iconSelectRef = ref();
|
||||||
const iconSelectorDialogRef = ref();
|
const iconSelectDialogRef = ref();
|
||||||
/**
|
|
||||||
* icon 加载
|
|
||||||
*/
|
|
||||||
function loadIcons() {
|
|
||||||
const icons = import.meta.glob("../../assets/icons/*.svg");
|
|
||||||
for (const icon in icons) {
|
|
||||||
const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
|
|
||||||
allIconNames.push(iconName);
|
|
||||||
}
|
|
||||||
filterIconNames.value = allIconNames;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* icon 筛选
|
* icon 筛选
|
||||||
|
|
@ -55,110 +108,25 @@ function handleSelect(iconName: string) {
|
||||||
/**
|
/**
|
||||||
* 点击容器外的区域关闭弹窗 VueUse onClickOutside
|
* 点击容器外的区域关闭弹窗 VueUse onClickOutside
|
||||||
*/
|
*/
|
||||||
onClickOutside(iconSelectorRef, () => (visible.value = false), {
|
onClickOutside(iconSelectRef, () => (visible.value = false), {
|
||||||
ignore: [iconSelectorDialogRef],
|
ignore: [iconSelectDialogRef],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* icon 加载
|
||||||
|
*/
|
||||||
|
function loadIcons() {
|
||||||
|
const icons = import.meta.glob("../../assets/icons/*.svg");
|
||||||
|
for (const icon in icons) {
|
||||||
|
const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
|
||||||
|
allIconNames.push(iconName);
|
||||||
|
}
|
||||||
|
filterIconNames.value = allIconNames;
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadIcons();
|
loadIcons();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<style scoped lang="scss"></style>
|
||||||
<div ref="iconSelectorRef" class="iconselect-container">
|
|
||||||
<el-input
|
|
||||||
v-model="inputValue"
|
|
||||||
readonly
|
|
||||||
placeholder="点击选择图标"
|
|
||||||
@click="visible = !visible"
|
|
||||||
>
|
|
||||||
<template #prepend>
|
|
||||||
<svg-icon :icon-class="inputValue" />
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
|
|
||||||
<el-popover
|
|
||||||
shadow="none"
|
|
||||||
:visible="visible"
|
|
||||||
placement="bottom-end"
|
|
||||||
trigger="click"
|
|
||||||
width="400"
|
|
||||||
>
|
|
||||||
<template #reference>
|
|
||||||
<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-bottom v-show="!visible" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 下拉选择弹窗 -->
|
|
||||||
<div ref="iconSelectorDialogRef">
|
|
||||||
<el-input
|
|
||||||
v-model="filterValue"
|
|
||||||
class="p-2"
|
|
||||||
placeholder="搜索图标"
|
|
||||||
clearable
|
|
||||||
@input="handleFilter"
|
|
||||||
/>
|
|
||||||
<el-divider border-style="dashed" />
|
|
||||||
|
|
||||||
<el-scrollbar height="300px">
|
|
||||||
<ul class="icon-list">
|
|
||||||
<li
|
|
||||||
v-for="(iconName, index) in filterIconNames"
|
|
||||||
:key="index"
|
|
||||||
class="icon-item"
|
|
||||||
@click="handleSelect(iconName)"
|
|
||||||
>
|
|
||||||
<el-tooltip :content="iconName" placement="bottom" effect="light">
|
|
||||||
<svg-icon
|
|
||||||
color="var(--el-text-color-regular)"
|
|
||||||
:icon-class="iconName"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.el-divider--horizontal {
|
|
||||||
margin: 10px auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconselect-container {
|
|
||||||
position: relative;
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding-left: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.icon-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
place-items: center center;
|
|
||||||
width: 10%;
|
|
||||||
padding: 5px;
|
|
||||||
margin: 0 10px 10px 0;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
border-color: var(--el-color-primary);
|
|
||||||
transition: all 0.2s;
|
|
||||||
transform: scaleX(1.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue