@ -0,0 +1,41 @@ |
||||
<script setup name="AntdModalTemplate"> |
||||
defineOptions({ |
||||
name: 'AntdModalTemplate' |
||||
}); |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="AntdModalTemplate"> |
||||
<main> |
||||
<slot></slot> |
||||
</main> |
||||
<footer> |
||||
<div> |
||||
<ASpace> |
||||
<slot name="footer">xsxs</slot> |
||||
</ASpace> |
||||
</div> |
||||
</footer> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.AntdModalTemplate { |
||||
position: relative; |
||||
max-height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
& > main { |
||||
position: relative; |
||||
max-height: 100%; |
||||
flex: 1; |
||||
overflow: auto; |
||||
} |
||||
& > footer { |
||||
position: relative; |
||||
flex-shrink: 0; |
||||
margin-top: 20px;display: flex; |
||||
flex-direction: row-reverse; |
||||
} |
||||
} |
||||
</style> |
@ -0,0 +1,52 @@ |
||||
<script setup name="IconSelect"> |
||||
import { UserOutlined } from '@ant-design/icons-vue'; |
||||
import { ref } from 'vue'; |
||||
defineOptions({ |
||||
name: 'IconSelect', |
||||
}); |
||||
|
||||
const option = [ |
||||
{ |
||||
label: '简单图标', |
||||
type: 'group', |
||||
icon: UserOutlined, |
||||
option: [ |
||||
{ |
||||
label: UserOutlined, |
||||
value: UserOutlined.name, |
||||
cname: UserOutlined.name, |
||||
}, |
||||
], |
||||
}, |
||||
// { |
||||
// label: '自定义图标', |
||||
// type: 'group', |
||||
// icon: UserOutlined, |
||||
// option: IconList1.map(item => ({ |
||||
// label: item, |
||||
// value: item.name, |
||||
// cname: item.cname, |
||||
// })) |
||||
// }, |
||||
]; |
||||
</script> |
||||
|
||||
<template> |
||||
<ASelect showSearch> |
||||
<ASelectOptGroup v-for="item in option" :key="item.label"> |
||||
<template #label> |
||||
<span> |
||||
<component :is="item.icon" /> |
||||
{{ item.label }} |
||||
</span> |
||||
</template> |
||||
<ASelectOption class="ASelectOption" v-for="opt in item.option" :value="opt.value"><component :is="opt.label" /></ASelectOption> |
||||
</ASelectOptGroup> |
||||
</ASelect> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.ASelectOption { |
||||
background: #ed5565; |
||||
} |
||||
</style> |
@ -0,0 +1,61 @@ |
||||
// | ------------------------------------------------------------
|
||||
// | @版本: version 0.1
|
||||
// | @创建人: 【Nie-hotok】
|
||||
// | @E-mail: x71291@outlook.com
|
||||
// | @所在项目: hoto-auth-vue3
|
||||
// | @文件描述: asyncCustomIcon.js -
|
||||
// | @创建时间: 2024-07-04 00:01
|
||||
// | @更新时间: 2024-07-04 00:01
|
||||
// | @修改记录:
|
||||
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
||||
// | =
|
||||
// | ------------------------------------------------------------
|
||||
|
||||
import { defineAsyncComponent, h } from 'vue'; |
||||
|
||||
const svgModules = import.meta.glob('./icon1/*.svg', { as: 'raw' }); |
||||
// console.log(svgModules);
|
||||
//
|
||||
// for (const [path, importFunc] of Object.entries(svgModules)) {
|
||||
//
|
||||
// try {
|
||||
// // 解析 Promise 以获取 SVG 文本内容
|
||||
// const svgContent = await importFunc();
|
||||
// // 这里你可以对 svgContent 进行处理,例如将其转换为 URL 或 Blob 对象,或者直接使用它
|
||||
// console.log(path, svgContent); // 注意:可能需要根据实际情况访问正确的属性(如 .default)
|
||||
// } catch (error) {
|
||||
// console.error(`Failed to load SVG from ${path}`, error);
|
||||
// }
|
||||
// }
|
||||
|
||||
const svgComponentList = []; |
||||
|
||||
for (const path in svgModules) { |
||||
// ! svg文件名
|
||||
const name = path.match(/\/(\w+)\.svg/)[1]; |
||||
// ! 异步组件
|
||||
const asyncSvgComponent = defineAsyncComponent(() => { |
||||
console.log('A'); |
||||
svgModules[path]().then((module) => { |
||||
console.log(module); |
||||
const svg = module.default || module; |
||||
const svgContent = svg.replace(/<\?xml.*?\?>|<!DOCTYPE.*?>/g, ''); |
||||
return { |
||||
name, |
||||
cname: 'C' + name, |
||||
setup() { |
||||
return () => |
||||
h('svg', { |
||||
innerHTML: svgContent, |
||||
class: 'svg-icon', |
||||
}); |
||||
}, |
||||
}; |
||||
}).catch(e => { |
||||
console.log(e); |
||||
}); |
||||
}); |
||||
svgComponentList.push(asyncSvgComponent); |
||||
} |
||||
|
||||
export const SvgComponentList = svgComponentList; |
@ -0,0 +1,80 @@ |
||||
// | ------------------------------------------------------------
|
||||
// | @版本: 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'; |
||||
|
||||
console.log(HomeOutlined); |
||||
|
||||
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, ''); |
||||
// 正则表达式,匹配并替换width和height属性为1em
|
||||
const sizeReplacementRegex = /(width|height)="([^"]+)"/g; |
||||
svgContent = svgContent.replace(sizeReplacementRegex, (match, prop, value) => { |
||||
return `${prop}="1em"`; |
||||
}); |
||||
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(props) { |
||||
return () => |
||||
h(Icon, { |
||||
...props, |
||||
component: SvgComponent, |
||||
}); |
||||
}, |
||||
}); |
||||
// iconComponentList1.push(SvgComponent);
|
||||
iconComponentList1.push(icon); |
||||
} |
||||
|
||||
export const IconComponentList1 = iconComponentList1; |
||||
export const A = defineComponent({ |
||||
name: 'AntDesignVue', |
||||
setup() { |
||||
return () => |
||||
h(Icon, { |
||||
component: HomeOutlined, |
||||
}); |
||||
}, |
||||
}); |
||||
export const B = defineComponent({ |
||||
name: 'AntDesignVueB', |
||||
setup() { |
||||
return () => |
||||
h(Icon, { |
||||
component: iconComponentList1[0], |
||||
}); |
||||
}, |
||||
}); |
||||
export const C = iconComponentList1[0]; |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 704 B |
After Width: | Height: | Size: 865 B |
After Width: | Height: | Size: 998 B |
After Width: | Height: | Size: 639 B |
After Width: | Height: | Size: 797 B |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 805 B |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 766 B |
After Width: | Height: | Size: 646 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 878 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 926 B |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,25 @@ |
||||
// | ------------------------------------------------------------
|
||||
// | @版本: version 0.1
|
||||
// | @创建人: 【Nie-hotok】
|
||||
// | @E-mail: x71291@outlook.com
|
||||
// | @所在项目: hoto-auth-vue3
|
||||
// | @文件描述: index.js -
|
||||
// | @创建时间: 2024-07-03 21:18
|
||||
// | @更新时间: 2024-07-03 21:18
|
||||
// | @修改记录:
|
||||
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
||||
// | =
|
||||
// | ------------------------------------------------------------
|
||||
|
||||
import { MyIcon } from './customIcon.js'; |
||||
|
||||
// ! 全局导出Antd图标组件
|
||||
export default function setupIconAntdComponents(app) { |
||||
// const iconComponentList = [
|
||||
// { name: '', component: ''}
|
||||
// ];
|
||||
// for (let item of iconComponentList) {
|
||||
// app.component(item.name, item.component);
|
||||
// }
|
||||
app.component('MyIcon', MyIcon); |
||||
} |
@ -0,0 +1,49 @@ |
||||
// | ------------------------------------------------------------
|
||||
// | @版本: 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; |
@ -0,0 +1,52 @@ |
||||
// | ------------------------------------------------------------
|
||||
// | @版本: 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; |
@ -0,0 +1,18 @@ |
||||
<template> |
||||
<icon :style="{ fontSize: '32px' }"> |
||||
<template #component="svgProps"> |
||||
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" v-bind="svgProps"> |
||||
<path |
||||
d="M99.096 315.634s-82.58-64" |
||||
fill="#6B676E" |
||||
p-id="1143" |
||||
/> |
||||
</svg> |
||||
</template> |
||||
</icon> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import Icon from '@ant-design/icons-vue'; |
||||
</script> |
||||
<style scoped> |
||||
</style> |