You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.0 KiB
88 lines
2.0 KiB
1 year ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2024-04-22 16:05:27
|
||
|
|
@ 备注: 图标选择列表
|
||
|
|
-->
|
||
|
|
<script lang='ts' setup>
|
||
|
|
|
||
|
|
const allIconNames: string[] = []; // 所有的图标名称集合
|
||
|
|
|
||
|
|
const filterValue = ref(""); // 筛选的值
|
||
|
|
const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合
|
||
|
|
/**
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2024-04-22 16:05:52
|
||
|
|
@ 功能: 加载svg
|
||
|
|
*/
|
||
|
|
const 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;
|
||
|
|
// console.log("icon 加载--->",allIconNames);
|
||
|
|
}
|
||
|
|
onMounted(()=>{
|
||
|
|
loadIcons();
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="svgBox">
|
||
|
|
<el-input
|
||
|
|
v-model="filterValue"
|
||
|
|
class="p-2"
|
||
|
|
placeholder="搜索图标"
|
||
|
|
clearable
|
||
|
|
@input="handleFilter"
|
||
|
|
/>
|
||
|
|
<el-divider border-style="dashed" style="margin:0px;" />
|
||
|
|
<el-scrollbar height="150px">
|
||
|
|
<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>
|
||
|
|
</template>
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.icon_list {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
padding-left: 10px;
|
||
|
|
margin-top: 10px;
|
||
|
|
|
||
|
|
.icon-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-items: center;
|
||
|
|
width: 10%;
|
||
|
|
padding: 5px;
|
||
|
|
margin: 0 5px 5px 0;
|
||
|
|
cursor: pointer;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
padding: 5px 10px;
|
||
|
|
&:hover {
|
||
|
|
color: var(--el-color-primary);
|
||
|
|
border-color: var(--el-color-primary);
|
||
|
|
transition: all 0.2s;
|
||
|
|
transform: scaleX(1.1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.svgBox{
|
||
|
|
:deep(.el-popper){
|
||
|
|
padding:0px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|