关于element-ui:Element-plus-图标使用

应用 vue3 引入 Element plus，应用 icon 时发现没有失常渲染到页面上。到官网查看后发现，如果你想像用例一样间接应用，你须要全局注册组件，才可能间接在我的项目里应用。

单个图标引入

你能够在单个组件中像上面的形式引入：

<template>
  <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu"
      default-active="2"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
    </el-sub-menu>
  </el-menu>
</template>

<script>
import {Location} from '@element-plus/icons-vue'

export default {
  name: "SideMenu",
  components: {Location}
}
</script>

全局注册为组件

然而每次都这样做显然过于繁琐，咱们能够应用上面的形式把 icon 全局注册为组件：

// main.js
import {createApp} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons-vue'

import App from './App.vue'

const app = createApp(App)

// 对立注册 Icon 图标
for (const iconName in ElIcons) {app.component(iconName, ElIcons[iconName])
}

app.mount('#app')

这样应用就不便多了。