element-plus的icon是以组件的形式使用的,需要在用到的页面单独引入注册的,如果一个页面要用到很多的icon,而且大多数页面都需要用到icon,这样的情况下单独引入就显得不那么友好友好了,这样我们就需要批量注册了
(如下代码拿来直接可以用)
第一步
创建ts文件内容如下
import * as icons from "@element-plus/icons"
const importFn = require.context('./', true, /\.vue$/)
export default {
install(app: any) {
// 批量注册全局组件
importFn.keys().forEach(key => {
// 导入组件
const component = importFn(key).default
// 注册组件
app.component(component.name, component)
})
addComponents(app)
}
}
// element icon 组件注册
function addComponents(APP: any) {
let EL_ICON_OBJ: any = {
...icons
}
for (const key in EL_ICON_OBJ) {
let component = getValue(key)
APP.component(key, component)
}
function getValue(arg: keyof typeof EL_ICON_OBJ) {
return EL_ICON_OBJ[arg]
}
}
第二步
main.ts文件内引入
import UI from '@/components/index'
APP.use(UI)