动态使用element-plus 的图标

一般情况下使用el-icon：

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

动态渲染使用：

<el-icon :size="20"><template v-for="(item, index) in icons" :key="index"><el-icon :color="item.color" :size="item.size"><component :is="item.name"></component></el-icon></template></el-icon>

export default {data() {return{icons: [{name: "House",color: "#409EFC",size: 20,},{name: "Plus",color: "",size: 24,},{name: "FullScreen",color: "#f89898",size: ""}]}},
}

效果：

动态使用element-plus 的图标相关推荐

Gradle编译生成不同的版本，动态设定应用标题 / 应用图标 / 替换常量
转载请标明出处:http://blog.csdn.net/xx326664162/article/details/51508132 文章出自:薛瑄的博客你也可以查看我的其他同类文章,也会让你有一定的 ...
uniapp动态显隐导航栏图标
uniapp动态显隐导航栏图标实现思路: 将图标的宽度设置为0,就可以将图标隐藏上代码: var pageView= this.$mp.page.$getAppWebview(); if(&quo ...
在Vue3中使用Element Plus Icon图标的几种方式
安装 Element Plus $ npm install @element-plus/icons 在main.js 引入 import * as ElIcon from '@element-plus ...
Android 判断颜色为深颜色还是浅颜色来动态调整app文字和图标颜色
Android 判断颜色为深颜色还是浅颜色来动态调整app文字和图标颜色前言解决方案1 方案2 完事前言现在,项目中有个需求就是 app 的顶部 title bar 的颜色能根据背景图片动态 ...
实现动态验证element输入框密码框
实现动态验证element输入框密码框 1.前提需求: 1.某个页面需要展示输入框的密码,但是更改过的密码后端给我们返回六个*** [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 ...
js动态添加页面的icon图标
js动态添加页面的icon图标 (function() {var link = document.createElement('link');link.type = 'image/x-icon';li ...
vue动态修改浏览器标题和图标
项目场景: 在一个功能一致的项目中,要分别部署成两个系统. 问题描述两个系统名称不一致.标题不一致.logo不一致,又不想单独拉出一套代码(单独拉出后维护成本增加),想要动态改变. 解决方案: 在m ...
Element Plus最新图标引入以及使用方法，icon动态组件，点击切换图标
最新版本的Element Plus已经移除了Font icon,以下引入以及使用方法为亲测可用的,但是不知道后续是否还会改变,大家可以借鉴一下. 本人使用版本 "element-plus&q ...
根据条件动态修改element 组件深层次样式
开发前提: vue elementUI 在开发中有时候 element 中我们使用的某个组件的样式不符合我们的需求,直接写行内样式,有时候会发现并不会生效,直接将样式写在 style 标签中虽然样式会 ...
动态修改浏览器导航栏图标和文字
1.设置网站标题 let title = ""; // 网站标题 document.title = title; // 动态修改网站标题 let title = "&qu ...

动态使用element-plus 的图标

动态使用element-plus 的图标相关推荐

最新文章

热门文章