Vue3 Element Plus 动态图标

Vue3 Element Plus 动态图标

Element Plus 中的图标以组件的形式来使用，而在基于Vue 2.x的Element UI中图标是字符串的形式，这样就导致过去的一些使用习惯不得不在使用Vue3的过程中改变，但实际上，在基于Vue3的Element Plus中也可以以字符串的形式来使用，只是需要多做一些工作。

为什么基于字符串更适合大家的使用呢？因为图标的使用有时候是动态的，比如：菜单上的图标大部分的时候是通过后台配置的，按钮上面的图标可能会因为使用者的不同而显示不同的图标，所以我们更多地需要使用动态图标，那么，下面就来说一下在Element Plus中如何在图标组件的基础上进行动态图标的使用。

1.全局注册图标组件

import { createApp } from 'vue'
import App from './major.vue'
import * as ElIcons from '@element-plus/icons-vue'
​
const app = createApp(App)
​
for (const name in ElIcons) {
    app.component(name, ElIcons[name])
}
​
app.mount('#app')

在上面的代码中，使用 import * as ElIcons from '@element-plus/icons-vue' 将所有图标导入，然后执行：

for (const name in ElIcons) {
    app.component(name, ElIcons[name])
}

对所有图标组件进行注册，这样，在页面中使用图标组件的时候就可以直接使用了。

2.以组件形式使用图标

1.使用el-icon

<el-icon :size="20">
    <edit />
</el-icon>

2.使用图标组件

<edit style="width: 1em; height: 1em; margin-right: 8px" />
<share style="width: 1em; height: 1em; margin-right: 8px" />

3.按钮图标

<el-button icon="Search" circle></el-button>
<el-button type="primary" icon="Edit" circle></el-button>
<el-button type="success" icon="Check" circle></el-button>
<el-button type="info" icon="Message" circle></el-button>
<el-button type="warning" icon="Star" circle></el-button>
<el-button type="danger" icon="Delete" circle></el-button>

3.动态图标

动态图标需要使用 component 标签来实现，如：

<component :is="icon" style="width: 20px; height:20px;"/>
<component v-for="(icon, index) in icons" :key="index" :is="icon"
           style="width: 20px; height:20px;"/>

在js代码中：

  data () {
    return {
      icon: 'edit',
      icons: ['plus', 'delete', 'search', 'check', 'message']
    }
  },

效果如下：