@ -0,0 +1,144 @@ |
|||||||
|
<script setup name="CustomIconSelect"> |
||||||
|
defineOptions({ name: 'CustomIconSelect' }); |
||||||
|
import { NPopover } from 'naive-ui'; |
||||||
|
import { custonIcon1, custonIcon2 } from '@/components/AntDesignVue/Icon/index.js'; |
||||||
|
import { ref, watch } from 'vue'; |
||||||
|
const props = defineProps({ |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
}, |
||||||
|
}); |
||||||
|
// icon滑动窗 |
||||||
|
const iconName = ref(props.value); |
||||||
|
|
||||||
|
// 定义 emit 事件 |
||||||
|
const emit = defineEmits(['update:value']); |
||||||
|
|
||||||
|
watch(props, (value) => { |
||||||
|
iconName.value = value.value; |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
// 打开选择器 |
||||||
|
const handleClick = (e) => { |
||||||
|
console.log(e); |
||||||
|
}; |
||||||
|
// 选择图标 |
||||||
|
const handleChooseIcon = (data) => { |
||||||
|
emit('update:value', data.name); |
||||||
|
}; |
||||||
|
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"> |
||||||
|
<template #trigger> |
||||||
|
<AInput class="iconShow" v-model:value="iconName" @click="handleClick"/> |
||||||
|
</template> |
||||||
|
<div class="iconBox"> |
||||||
|
<header>我是图标哦</header> |
||||||
|
<main> |
||||||
|
<div class="iconClassContainer" :id="iconClass.title" v-for="iconClass in iconList" :key="iconClass.label"> |
||||||
|
<header>{{ iconClass.label }}</header> |
||||||
|
<main> |
||||||
|
<div class="iconItem" @click="handleChooseIcon(iconItem)" v-for="iconItem in iconClass.option" :key="iconItem.name"><component :is="iconItem" /></div> |
||||||
|
</main> |
||||||
|
</div> |
||||||
|
</main> |
||||||
|
</div> |
||||||
|
</NPopover> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.iconBox { |
||||||
|
position: relative; |
||||||
|
width: 360px; |
||||||
|
height: 240px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
user-select: none; |
||||||
|
& > header { |
||||||
|
position: relative; |
||||||
|
flex: 0 0; |
||||||
|
height: 30px; |
||||||
|
background: #cc361c; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
& > main { |
||||||
|
position: relative; |
||||||
|
flex: 1 1; |
||||||
|
/**************************************************************************/ |
||||||
|
flex-basis: 0; |
||||||
|
/**************************************************************************/ |
||||||
|
overflow: auto; |
||||||
|
& > div.iconClassContainer { |
||||||
|
position: relative; |
||||||
|
margin-bottom: 15px; |
||||||
|
&:after { |
||||||
|
content: ' '; |
||||||
|
position: absolute; |
||||||
|
bottom: -9px; |
||||||
|
height: 2px; |
||||||
|
width: 100%; |
||||||
|
border-radius: 5px; |
||||||
|
background: #cdcdcd; |
||||||
|
} |
||||||
|
& > header { |
||||||
|
margin-bottom: 5px; |
||||||
|
font-size: 1.1em; |
||||||
|
background: #cdcdcd; |
||||||
|
border-radius: 3px; |
||||||
|
padding: 2px 5px; |
||||||
|
} |
||||||
|
& > main { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
//justify-content: space-between/*space-around*/; |
||||||
|
& > div.iconItem { |
||||||
|
position: relative; |
||||||
|
flex: 0 0 34px; |
||||||
|
padding: 5px; |
||||||
|
margin: 3px; |
||||||
|
border-radius: 3px; |
||||||
|
//background: #efefef; |
||||||
|
cursor: pointer; |
||||||
|
font-size: 1.4em; |
||||||
|
aspect-ratio: 1/1; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
transition: all ease-in-out 200ms; |
||||||
|
border: 1px solid #cdcdcd; |
||||||
|
&:hover { |
||||||
|
//background: #ddd; |
||||||
|
box-shadow: 0px 0px 2px 1px #1677ff33; |
||||||
|
border: 1px solid #1677ffaa; |
||||||
|
} |
||||||
|
} |
||||||
|
&::after { |
||||||
|
content: ''; |
||||||
|
flex: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
& > div.iconClassContainer:last-child:after { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 723 B |
After Width: | Height: | Size: 764 B |
After Width: | Height: | Size: 567 B |
After Width: | Height: | Size: 979 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 782 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 977 B |
After Width: | Height: | Size: 928 B |
After Width: | Height: | Size: 635 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 625 B |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 663 B |
After Width: | Height: | Size: 624 B |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 807 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 858 B |
After Width: | Height: | Size: 653 B |
After Width: | Height: | Size: 949 B |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 806 B |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 791 B |
After Width: | Height: | Size: 739 B |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 791 B |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 649 B |
After Width: | Height: | Size: 916 B |
After Width: | Height: | Size: 717 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 740 B |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 872 B |
After Width: | Height: | Size: 884 B |
After Width: | Height: | Size: 974 B |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 970 B |
After Width: | Height: | Size: 868 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 931 B |
After Width: | Height: | Size: 863 B |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 759 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.2 KiB |
@ -1,49 +0,0 @@ |
|||||||
// | ------------------------------------------------------------
|
|
||||||
// | @版本: version 0.1
|
|
||||||
// | @创建人: 【Nie-hotok】
|
|
||||||
// | @E-mail: x71291@outlook.com
|
|
||||||
// | @所在项目: hoto-auth-vue3
|
|
||||||
// | @文件描述: customIcon.js -
|
|
||||||
// | @创建时间: 2024-07-03 21:41
|
|
||||||
// | @更新时间: 2024-07-03 21:41
|
|
||||||
// | @修改记录:
|
|
||||||
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
|
||||||
// | =
|
|
||||||
// | ------------------------------------------------------------
|
|
||||||
import { defineComponent, h } from 'vue'; |
|
||||||
import Icon, { HomeOutlined } from '@ant-design/icons-vue'; |
|
||||||
|
|
||||||
const svgContentPool1 = import.meta.glob('./icon1/*.svg', { |
|
||||||
eager: true, |
|
||||||
query: '?raw', |
|
||||||
import: 'default' |
|
||||||
}); |
|
||||||
const iconComponentList1 = []; |
|
||||||
for (const path in svgContentPool1) { |
|
||||||
const svgName = path.match(/\/(\w+)\.svg/)[1]; |
|
||||||
let svgContent = svgContentPool1[path].default || svgContentPool1[path]; |
|
||||||
svgContent = svgContent.replace(/<\?xml.*?\?>|<!DOCTYPE.*?>/g, ''); |
|
||||||
const SvgComponent = defineComponent({ |
|
||||||
name: svgName, |
|
||||||
cname: 'C' + svgName, |
|
||||||
setup() { |
|
||||||
return () => |
|
||||||
h('div', { |
|
||||||
innerHTML: svgContent, attrs: { viewBox: '0 0 1024 1024' } |
|
||||||
}); |
|
||||||
}, |
|
||||||
}); |
|
||||||
// name: SvgComponent.name,
|
|
||||||
// cname: SvgComponent.cname,
|
|
||||||
// console.log(SvgComponent);
|
|
||||||
const icon = defineComponent({ |
|
||||||
name: SvgComponent.name, |
|
||||||
setup() { |
|
||||||
return () => h(Icon, {}, HomeOutlined); |
|
||||||
}, |
|
||||||
}); |
|
||||||
// iconComponentList1.push(SvgComponent);
|
|
||||||
iconComponentList1.push(Icon); |
|
||||||
} |
|
||||||
|
|
||||||
export const IconComponentList1 = iconComponentList1; |
|
@ -1,52 +0,0 @@ |
|||||||
// | ------------------------------------------------------------
|
|
||||||
// | @版本: version 0.1
|
|
||||||
// | @创建人: 【Nie-hotok】
|
|
||||||
// | @E-mail: x71291@outlook.com
|
|
||||||
// | @所在项目: hoto-auth-vue3
|
|
||||||
// | @文件描述: test.js -
|
|
||||||
// | @创建时间: 2024-07-03 22:43
|
|
||||||
// | @更新时间: 2024-07-03 22:43
|
|
||||||
// | @修改记录:
|
|
||||||
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
|
||||||
// | =
|
|
||||||
// | ------------------------------------------------------------
|
|
||||||
|
|
||||||
import { defineAsyncComponent, defineComponent, h } from 'vue'; |
|
||||||
|
|
||||||
const iconPool = import.meta.glob('./icon1/*.svg', { eager: true, as: 'raw'}); |
|
||||||
// const iconPool = import.meta.glob('./icon1/*.svg', );
|
|
||||||
const nameList = []; |
|
||||||
const componentList = []; |
|
||||||
for (const path in iconPool) { |
|
||||||
const name = path.match(/\/(\w+)\.svg/)[1]; |
|
||||||
nameList.push(name); |
|
||||||
const componentConfig = iconPool[path].default || iconPool[path]; |
|
||||||
const svgContent = componentConfig.replace(/<\?xml.*?\?>|<!DOCTYPE.*?>/g, ''); |
|
||||||
// console.log(svgContent);
|
|
||||||
const SvgComponent = defineComponent({ |
|
||||||
name, |
|
||||||
// setup() {
|
|
||||||
// return () => h('div',svgContent);
|
|
||||||
// },
|
|
||||||
// setup() {
|
|
||||||
// return {
|
|
||||||
// svgContent
|
|
||||||
// };
|
|
||||||
// },
|
|
||||||
// render() {
|
|
||||||
// return h('div', {
|
|
||||||
// innerHTML: this.svgContent,
|
|
||||||
// class: 'svg-icon'
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
setup() { |
|
||||||
return () => h('div', { |
|
||||||
innerHTML: svgContent, |
|
||||||
}); |
|
||||||
}, |
|
||||||
}); |
|
||||||
componentList.push(SvgComponent); |
|
||||||
} |
|
||||||
|
|
||||||
// export const NameList = nameList;
|
|
||||||
export const ComponentList = componentList; |
|