@ -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; |