亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3 element-plus如何使用icon圖標(biāo)組件

 更新時(shí)間：2024年03月19日 14:15:22   作者：天馬3798  
這篇文章主要介紹了vue3 element-plus如何使用icon圖標(biāo)組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3 element-plus使用icon圖標(biāo)組件

目前 element-plus版本是2.0.4

當(dāng)前版本的icon還沒有默認(rèn)在組件中，需要另外安裝才能使用圖標(biāo)。

使用步驟

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>

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

<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.動(dòng)態(tài)綁定icon/菜單動(dòng)態(tài)綁定icon

// html
<template>
  <component class="xxx" :is="iconName"></component>
</template>
// script
export default {
  name: 'Login',
  setup() {
    const iconName = 'Search'
    return {
      iconName
    }
  }
}

總結(jié)

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

相關(guān)文章

最新評(píng)論