vue3 element-plus如何使用icon圖標組件

更新時間：2024年03月19日 14:15:22 作者：天馬3798

這篇文章主要介紹了vue3 element-plus如何使用icon圖標組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3 element-plus使用icon圖標組件

目前 element-plus版本是2.0.4

當前版本的icon還沒有默認在組件中，需要另外安裝才能使用圖標。

使用步驟

1.安裝@element-plus/icons-vue庫

npm install @element-plus/icons-vue

2.全局引入icon組件

import { createApp } from 'vue'
import App from './App.vue'
import installElementPlus from './plugins/element'
 
//main.js
import * as ElIconModules from '@element-plus/icons-vue'
 
var app=createApp(App);
 
app.use(installElementPlus);
 
Object.keys(ElIconModules).forEach(function (key) {
    app.component(ElIconModules[key].name, ElIconModules[key])
  })
app.mount('#app');

3.使用icon

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

     <el-button type="primary">
    <el-icon style="vertical-align: middle;">
      <search />
    </el-icon>
    <span style="vertical-align: middle;"> Search </span>
  </el-button>

之前的使用方式還在支持中，目前需要特殊導入。

<template>
  <div class="flex">
    <el-button type="primary" :icon="Edit"></el-button>
    <el-button type="primary" :icon="Share"></el-button>
    <el-button type="primary" :icon="Delete"></el-button>
    <el-button type="primary" :icon="Search">Search</el-button>
    <el-button type="primary">
      Upload<el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
  </div>
</template>
<script setup lang="ts">
import { Edit, Share, Delete, Search, Upload } from '@element-plus/icons-vue'
</script>

4.動態(tài)綁定icon/菜單動態(tài)綁定icon

// html
<template>
  <component class="xxx" :is="iconName"></component>
</template>

// script
export default {
  name: 'Login',
  setup() {
    const iconName = 'Search'
    return {
      iconName
    }
  }
}

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vite+Vue3項目版本更新檢查與頁面自動刷新的實現(xiàn)方案
使用 Vite 對 Vue 項目進行打包,對 js 和 css 文件使用了 chunkhash 進行了文件緩存控制,但是項目的 index.html 文件在版本頻繁迭代更新時,會存在被瀏覽器緩存的情況,所以本文介紹了Vite+Vue3項目版本更新檢查與頁面自動刷新方案,需要的朋友可以參考下
2025-09-09
基于Vue3實現(xiàn)組件封裝的技巧分享
這篇文章主要介紹了基于Vue3實現(xiàn)組件封裝的技巧,本文在Vue3的基礎上針對一些常見UI組件庫組件進行二次封裝,旨在追求更好的個性化,更靈活的拓展,感興趣的小伙伴跟著小編一起來看看吧
2024-09-09
前端預覽pdf文件流詳細步驟
公司最近有這么個需求,在線預覽pdf功能,正好有點時間,稍微整理記錄一下,這篇文章主要給大家介紹了關于前端預覽pdf文件流的相關資料,需要的朋友可以參考下
2023-09-09
簡單聊一聊axios配置請求頭content-type
最近在工作中碰到一個問題,后端提供的get請求的接口需要在request header設置,下面這篇文章主要給大家介紹了關于axios配置請求頭content-type的相關資料,需要的朋友可以參考下
2022-04-04
VUE 全局變量的幾種實現(xiàn)方式
這篇文章主要介紹了VUE 全局變量的幾種實現(xiàn)方式,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Vue+elementui 實現(xiàn)復雜表頭和動態(tài)增加列的二維表格功能
這篇文章主要介紹了Vue+elementui 實現(xiàn)復雜表頭和動態(tài)增加列的二維表格功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
vue頂部菜單欄實現(xiàn)小結
這篇文章主要介紹了vue頂部菜單欄實現(xiàn)小結,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
vue-drawer-layout實現(xiàn)手勢滑出菜單欄
這篇文章主要為大家詳細介紹了vue-drawer-layout實現(xiàn)手勢滑出菜單欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11
vue3中template使用ref無需.value原因解析
vue3的template中使用ref變量無需使用.value,還可以在事件處理器中進行賦值操作時,無需使用.value就可以直接修改ref變量的值,這篇文章主要介紹了原來vue3中template使用ref無需.value是因為這個,需要的朋友可以參考下
2024-06-06
適合前端Vue開發(fā)童鞋的跨平臺Weex的使用詳解
這篇文章主要介紹了適合前端Vue開發(fā)童鞋的跨平臺Weex的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10