首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 element-plus用icon图标组件

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.动态绑定icon/菜单动态绑定icon

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

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。