今天使用vue3+vite重构项目的时候,构建侧边栏的时候需要动态渲染图标
之前的写法是
<i class="el-icon-menu"></i>
这样就可以写一个数组,动态的绑定class
但是在vue3中不能这样使用
官方给出的实例是这样的
<el-icon><Plus /></el-icon>
但是这样动态渲染就不行了,找了半天,终于看到可以使用内置的component组件
//main.js
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
<el-icon><component :is="icon[item.id]" /></el-icon>