|
|
|
|
@ -1,8 +1,10 @@ |
|
|
|
|
<script setup name="CustomIconSelect"> |
|
|
|
|
defineOptions({ name: 'CustomIconSelect' }); |
|
|
|
|
import iconSvg from './add.svg'; |
|
|
|
|
import iconSvg2 from './icon.svg'; |
|
|
|
|
import { NPopover } from 'naive-ui'; |
|
|
|
|
import { custonIcon1, custonIcon2 } from '@/components/AntDesignVue/Icon/index.js'; |
|
|
|
|
import { ref, watch } from 'vue'; |
|
|
|
|
import { onMounted, ref, shallowRef, watch } from 'vue'; |
|
|
|
|
const props = defineProps({ |
|
|
|
|
value: { |
|
|
|
|
type: String, |
|
|
|
|
@ -11,46 +13,81 @@ const props = defineProps({ |
|
|
|
|
}); |
|
|
|
|
// icon滑动窗 |
|
|
|
|
const iconName = ref(props.value); |
|
|
|
|
// 选择的图标 |
|
|
|
|
const iconComponent = shallowRef(null); |
|
|
|
|
// 弹出框 |
|
|
|
|
const popover = ref(null); |
|
|
|
|
const iconList = [ |
|
|
|
|
{ |
|
|
|
|
label: '简单的库', |
|
|
|
|
icon: '', |
|
|
|
|
title: 'icon1', |
|
|
|
|
option: custonIcon1, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: '拓展的库', |
|
|
|
|
icon: '', |
|
|
|
|
title: 'icon2', |
|
|
|
|
option: custonIcon2, |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
// 定义 emit 事件 |
|
|
|
|
const emit = defineEmits(['update:value']); |
|
|
|
|
|
|
|
|
|
watch(props, (value) => { |
|
|
|
|
iconName.value = value.value; |
|
|
|
|
iconComponent.value = findIcon(iconName.value); |
|
|
|
|
}); |
|
|
|
|
onMounted(() => { |
|
|
|
|
iconComponent.value = findIcon(iconName.value); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 查找图标 |
|
|
|
|
function findIcon(name){ |
|
|
|
|
if(name == '' || name == undefined || name == null) { |
|
|
|
|
return null; |
|
|
|
|
}else{ |
|
|
|
|
const foldername = name.split('-')[0]; |
|
|
|
|
const componentList = iconList.filter((item) => item.title == foldername); |
|
|
|
|
if(componentList.length == 0) { |
|
|
|
|
return null; |
|
|
|
|
}else{ |
|
|
|
|
const target = componentList[0].option.filter(icon => icon.name == name); |
|
|
|
|
if(target.length == 0){ |
|
|
|
|
return null; |
|
|
|
|
}else { |
|
|
|
|
return target[0]; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 打开选择器 |
|
|
|
|
const handleClick = (e) => { |
|
|
|
|
console.log(e); |
|
|
|
|
// console.log(e); |
|
|
|
|
}; |
|
|
|
|
// 选择图标 |
|
|
|
|
const handleChooseIcon = (data) => { |
|
|
|
|
emit('update:value', data.name); |
|
|
|
|
popover.value.setShow(false); |
|
|
|
|
}; |
|
|
|
|
const iconList = [ |
|
|
|
|
{ |
|
|
|
|
label: '简单的库', |
|
|
|
|
icon: '', |
|
|
|
|
title: 'Icon1', |
|
|
|
|
option: custonIcon1, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: '拓展的库', |
|
|
|
|
icon: '', |
|
|
|
|
title: 'Icon2', |
|
|
|
|
option: custonIcon2, |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<NPopover ref="popRef" trigger="click" @click="handleClick" placement="bottom-start"> |
|
|
|
|
<NPopover ref="popover" trigger="click" @click="handleClick" placement="bottom-start"> |
|
|
|
|
<template #trigger> |
|
|
|
|
<AInput class="iconShow" v-model:value="iconName" @click="handleClick"/> |
|
|
|
|
<div class="chooseBox"> |
|
|
|
|
<div v-if="iconName == ''" class="default-icon"> |
|
|
|
|
<img :src="iconSvg" alt="" @click="handleClick"> |
|
|
|
|
</div> |
|
|
|
|
<div v-else class="choose-icon"><component v-if="iconComponent != null" :is="iconComponent"/><span v-else>NULL</span></div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<div class="iconBox"> |
|
|
|
|
<header>我是图标哦</header> |
|
|
|
|
<header> |
|
|
|
|
<img :src="iconSvg2" alt="我是图标哦">新新图标库 |
|
|
|
|
</header> |
|
|
|
|
<main> |
|
|
|
|
<div class="iconClassContainer" :id="iconClass.title" v-for="iconClass in iconList" :key="iconClass.label"> |
|
|
|
|
<header>{{ iconClass.label }}</header> |
|
|
|
|
@ -64,6 +101,39 @@ const iconList = [ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.chooseBox{ |
|
|
|
|
position: relative; |
|
|
|
|
border-radius: 5px; |
|
|
|
|
width: 40px; |
|
|
|
|
height: 40px; |
|
|
|
|
border: 2px #ccc dashed; |
|
|
|
|
cursor: pointer; |
|
|
|
|
transition: all ease-in-out 0.2s; |
|
|
|
|
& > div.default-icon{ |
|
|
|
|
position: relative; |
|
|
|
|
height: 100%; |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
& > img{ |
|
|
|
|
width: 16px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
& > div.choose-icon{ |
|
|
|
|
position: relative; |
|
|
|
|
height: 100%; |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 24px; |
|
|
|
|
} |
|
|
|
|
&:hover{ |
|
|
|
|
border: 2px #1677ffaa dashed; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.iconBox { |
|
|
|
|
position: relative; |
|
|
|
|
width: 360px; |
|
|
|
|
@ -75,8 +145,15 @@ const iconList = [ |
|
|
|
|
position: relative; |
|
|
|
|
flex: 0 0; |
|
|
|
|
height: 30px; |
|
|
|
|
background: #cc361c; |
|
|
|
|
//background: #cc361c; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
& > img { |
|
|
|
|
width: 20px; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
& > main { |
|
|
|
|
position: relative; |
|
|
|
|
@ -99,7 +176,6 @@ const iconList = [ |
|
|
|
|
} |
|
|
|
|
& > header { |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
font-size: 1.1em; |
|
|
|
|
background: #cdcdcd; |
|
|
|
|
border-radius: 3px; |
|
|
|
|
padding: 2px 5px; |
|
|
|
|
|
