[element-plus]在动态菜单中使用动态图标
element-plus
的图标其实是一个个的组件:
JavaScript:
import { IconName, IconName2 } from '@element-plus/icons-vue';
Template:
<el-icon>
<IconName/>
</el-icon>
使用 :is
切换组件:
<component :is="bool ? IconName : IconName2"></component>
然而 :is
的值必须是引入的组件,不能是字符串,否则就会渲染成这个样子:
<iconname></iconname>
如果菜单结构单独放在一个文件中,比如 menu.js
:
export default [
{
name: 'Menu 1',
icon: 'IconName'
}
]
这里的 icon
的值就不能是字符串,需要是一个组件对象的引用。这就需要先在 menu.js
中引入图标组件:
import { IconName } from '@element-plus/icons-vue';
然后将组件传给 icon
:
export default [
{
name: 'Menu 1',
icon: IconName
}
]
这样,就能够在组件中正确显示图标了。当然,这时候组件中就不需要再引入图标了。
End
评论已关闭