|
|
|
|
<!--
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-22 14:39:07
|
|
|
|
|
@ 备注: 选择图标弹窗
|
|
|
|
|
-->
|
|
|
|
|
<script lang='ts' setup>
|
|
|
|
|
import SvgIcon from "@/components/SvgIcon/index.vue";
|
|
|
|
|
import SvgPage from "@/components/IconSelect/svgPage.vue";
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
isShow:{
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
svgName:{
|
|
|
|
|
type:String,
|
|
|
|
|
require: false,
|
|
|
|
|
default:""
|
|
|
|
|
},
|
|
|
|
|
iconList:{
|
|
|
|
|
type:Object,
|
|
|
|
|
default(){
|
|
|
|
|
return {}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
const visible = ref(false); // 弹窗显示状态
|
|
|
|
|
const iconSelectorRef = ref();
|
|
|
|
|
const iconSelectorDialogRef = ref();
|
|
|
|
|
const emits = defineEmits(["update:isShow","update:svgName"]);
|
|
|
|
|
const filterIconNames = ref<string[]>([]);
|
|
|
|
|
//点击窗外。取消显示
|
|
|
|
|
onClickOutside(iconSelectorRef, () => (visible.value = false), {
|
|
|
|
|
ignore: [iconSelectorDialogRef],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch(() => props.isShow, (val:boolean) =>{
|
|
|
|
|
if(val){
|
|
|
|
|
filterIconNames.value = props.iconList
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-22 16:43:49
|
|
|
|
|
@ 功能: 关闭
|
|
|
|
|
*/
|
|
|
|
|
const handleClose = () => {
|
|
|
|
|
emits("update:isShow",false)
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-22 16:54:03
|
|
|
|
|
@ 功能: 确定
|
|
|
|
|
*/
|
|
|
|
|
const handleSelect = (svgName:string) => {
|
|
|
|
|
emits("update:svgName",svgName)
|
|
|
|
|
handleClose()
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog
|
|
|
|
|
v-model="props.isShow"
|
|
|
|
|
title="选择图标"
|
|
|
|
|
width="500"
|
|
|
|
|
:before-close="handleClose"
|
|
|
|
|
>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="filterValue"
|
|
|
|
|
class="p-2"
|
|
|
|
|
placeholder="搜索图标"
|
|
|
|
|
clearable
|
|
|
|
|
@input="handleFilter"
|
|
|
|
|
/>
|
|
|
|
|
<el-divider border-style="dashed" style="margin:0px;" />
|
|
|
|
|
|
|
|
|
|
<el-scrollbar height="250px">
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
|
|
.icon_list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
padding-left: 0px;
|
|
|
|
|
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>
|
