Element plus 圖示使用

老毛發表於2022-04-25
使用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')

這樣使用就方便多了。

相關文章