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.
83 lines
1.6 KiB
83 lines
1.6 KiB
2 years ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 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 sendClick = () => {
|
||
|
|
emits("update:svgName","liuChengBiaoDan")
|
||
|
|
handleClose()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<el-dialog
|
||
|
|
v-model="props.isShow"
|
||
|
|
title="选择图标"
|
||
|
|
width="500"
|
||
|
|
:before-close="handleClose"
|
||
|
|
>
|
||
|
|
<span>{{filterIconNames}}</span>
|
||
|
|
|
||
|
|
<template #footer>
|
||
|
|
<div class="dialog-footer">
|
||
|
|
<el-button @click="handleClose">取消</el-button>
|
||
|
|
<el-button type="primary" @click="sendClick">
|
||
|
|
确定
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
|
||
|
|
</style>
|