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">
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
|
@ -5,10 +63,16 @@ const props = defineProps({
|
|||
require: false,
|
||||
default: "",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "500px",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
const inputValue = toRef(props, "modelValue");
|
||||
const width = toRef(props, "width");
|
||||
|
||||
const visible = ref(false); // 弹窗显示状态
|
||||
|
||||
|
|
@ -17,19 +81,8 @@ const allIconNames: string[] = []; // 所有的图标名称集合
|
|||
const filterValue = ref(""); // 筛选的值
|
||||
const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合
|
||||
|
||||
const iconSelectorRef = ref();
|
||||
const iconSelectorDialogRef = 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;
|
||||
}
|
||||
const iconSelectRef = ref();
|
||||
const iconSelectDialogRef = ref();
|
||||
|
||||
/**
|
||||
* icon 筛选
|
||||
|
|
@ -55,110 +108,25 @@ function handleSelect(iconName: string) {
|
|||
/**
|
||||
* 点击容器外的区域关闭弹窗 VueUse onClickOutside
|
||||
*/
|
||||
onClickOutside(iconSelectorRef, () => (visible.value = false), {
|
||||
ignore: [iconSelectorDialogRef],
|
||||
onClickOutside(iconSelectRef, () => (visible.value = false), {
|
||||
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(() => {
|
||||
loadIcons();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue