Vue3 Element Plus 动态图标

Element Plus 中的图标以组件的形式来使用，而在基于Vue 2.x的Element UI中图标是字符串的形式，这样就导致过去的一些使用习惯不得不在使用Vue3的过程中改变，但实际上，在基于Vue3的Element Plus中也可以以字符串的形式来使用，只是需要多做一些工作。

为什么基于字符串更适合大家的使用呢？因为图标的使用有时候是动态的，比如：菜单上的图标大部分的时候是通过后台配置的，按钮上面的图标可能会因为使用者的不同而显示不同的图标，所以我们更多地需要使用动态图标，那么，下面就来说一下在Element Plus中如何在图标组件的基础上进行动态图标的使用。

1.全局注册图标组件

import { createApp } from 'vue'
import App from './major.vue'
import * as ElIcons from '@element-plus/icons-vue'

const app = createApp(App)

for (const name in ElIcons) {app.component(name, ElIcons[name])
}

app.mount('#app')

在上面的代码中，使用 import * as ElIcons from '@element-plus/icons-vue' 将所有图标导入，然后执行：

for (const name in ElIcons) {app.component(name, ElIcons[name])
}

对所有图标组件进行注册，这样，在页面中使用图标组件的时候就可以直接使用了。

2.以组件形式使用图标

1.使用el-icon

<el-icon :size="20"><edit />
</el-icon>

2.使用图标组件

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

3.按钮图标

<el-button icon="Search" circle></el-button>
<el-button type="primary" icon="Edit" circle></el-button>
<el-button type="success" icon="Check" circle></el-button>
<el-button type="info" icon="Message" circle></el-button>
<el-button type="warning" icon="Star" circle></el-button>
<el-button type="danger" icon="Delete" circle></el-button>

3.动态图标

动态图标需要使用 component 标签来实现，如：

<component :is="icon" style="width: 20px; height:20px;"/>
<component v-for="(icon, index) in icons" :key="index" :is="icon"style="width: 20px; height:20px;"/>

在js代码中：

  data () {return {icon: 'edit',icons: ['plus', 'delete', 'search', 'check', 'message']}},

效果如下：

Vue3 Element Plus 动态图标相关推荐

vue3+ts+element-plus动态图标生成方式
1.安装 $ yarn add @element-plus/icons # 或者 $ npm install @element-plus/icons 2.使用全局组件的方式引入 //main.ts i ...
在Vue3中使用Element Plus Icon图标的几种方式
安装 Element Plus $ npm install @element-plus/icons 在main.js 引入 import * as ElIcon from '@element-plus ...
使用Vue3+Element Plus开发Chrome插件
使用Vue3+Element Plus开发Chrome插件引言初始Vue项目的创建 Element-Plus组件的安装及导入其他文件配置 .eslintrc.js文件 vue.config.js ...
openlayers6【十六】vue overlay类实现gif动态图标效果详解
文章目录 1. 写在前面 2. 效果图 3. 使用overlay类,地图添加动态图标 4. css设置gif图标 5. 完整代码 1. 写在前面 openlayer 里面支持 gif 图标上图的只有 ...
东京奥运会73枚动态图标刷爆朋友圈，中国网友怒赞：不愧是设计大国！
本文转载自公众号"日本设计小站"(ID:japandesign),已获得其授权. 前不久,东京奥组委.残奥组委公布了73个奥运比赛项目的动态图标视觉效果堪称惊艳! 图标先以碎片 ...
html动态图标代码,SVG动态图标是如何实现的
这篇文章给大家分享的内容是SVG动态图标是如何实现的,有需要的朋友可以参考一下. 在 loading.io 上能看到好多效果惊艳的loading图标.它们都是用svg写成的,寥寥几行代码,比img图片 ...
酷炫的SVG 动态图标
酷炫的SVG 动态图标在 loading.io 上能看到好多效果惊艳的loading图标.它们都 ...
android 时钟动态图标,Android 8.1 Launcher3实现动态指针时钟功能
本文主要实现功能,可能有不合理的地方首先创建一个实现功能的工具里,直接上代码: import android.content.Context; import android.graphics.Bit ...
html5 怎么写动态图形设计,如何用SVG制作酷炫动态图标?（代码实例）
本章给大家介绍在html5中如何用SVG制作酷炫动态图标?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.基本图形元素 svg有一些预定义的形状元素:矩形,圆形,椭圆 ...

Vue3 Element Plus 动态图标

Vue3 Element Plus 动态图标

1.全局注册图标组件

2.以组件形式使用图标

3.动态图标

Vue3 Element Plus 动态图标相关推荐

最新文章

热门文章