Vue3 封装 element-plus 图标选择器

一、实现效果

效果一：

效果二：

 

效果一的这个是把全部的icon图标都让它显示出来，让我们自己选择说选图标

二、效果一实现步骤

2.1. 全局注册 icon 组件

// main.ts
import App from './App.vue';
import { createApp } from 'vue';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
const app = createApp(App);
 
// 全局挂载和注册 element-plus 的所有 icon
app.config.globalProperties.$icons = []
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.config.globalProperties.$icons.push(key)
    app.component(key, component)
}
 
app.mount('#app');

2.2. 组件实现 

2.3. 使用 

效果二的这个是渲染后端返回的icon图标

三、效果二实现步骤

3.1. 全局注册 icon 组件

// main.ts
import App from './App.vue';
import { createApp } from 'vue';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
const app = createApp(App);
 
// 全局挂载和注册 element-plus 的所有 icon
app.config.globalProperties.$icons = []
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.config.globalProperties.$icons.push(key)
    app.component(key, component)
}
 
app.mount('#app');

3.2. 组件实现 

3.3. 使用