vue中element-ui中的el-button自定义icon图标

实现:

button的icon属性自定义一个图标名称,这个自定义的图标名称会默认添加到button下i标签的class上,我们只需要设置i标签的样式就可以了。

1. 控制台显示的代码

2 .图片展示

 3. 按钮上使用自定义的icon

完整代码:

<el-button icon="el-icon-my-message" size="mini" type="primary">
   查看
</el-button>

样式代码: 

    ::v-deep .el-icon-my-message {
        background: url('../../assets/images/lookMsg.png') center no-repeat;
        width: 21px;
        height: 26px;
    }

    ::v-deep .el-icon-my-message:before {
        content: "替";
        font-size: 20px;
        visibility: hidden;
    }

    ::v-deep .el-icon-my-message {
        font-size: 16px;
    }

    ::v-deep .el-icon-my-message:before {
        content: "\e611";
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/419373.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

初学者如何使用QT新建一个包含UI界面的C++项目

文章目录 一、下载并安装QT51、下载安装包2、注册/登录账号3、安装qt6 二、新建QT Widget项目1、新建项目并且运行2、易错点&#xff1a;可能运行成功得到UI界面但是会报错&#xff08;原因是使用了中文路径&#xff09; 一、下载并安装QT5 1、下载安装包 进入下载网址 Windo…

钉钉机器人发送折线图卡片 工具类代码

钉钉机器人 “创建并投放卡片 接口 ” 可以 发送折线图、柱状图 官方文档&#xff1a;创建并投放卡片 - 钉钉开放平台 0依赖、1模板、2机器人放到内部应用、3放开这个权限 、4工具类、5调用工具类 拼接入参 卡片模板 自己看文档创建&#xff0c;卡片模板的id 有用 0、依赖…

c语言经典测试题8

在c语言经典测试题6的第一题&#xff0c;大家是否想过可不可以将递归参数改为s呢&#xff1f;或许有的人已经试过了&#xff0c;但是发现好像不会有结果&#xff0c;其实是因为s为后置&#xff0c;先试用后加1&#xff0c;然而我们这个是在s出了函数之后才会运行加1操作&#x…

响应式编程

编程范式 编程范式是一种编程风格或方法论&#xff0c;它规定了解决问题和实现计算机程序的基本方法。不同的编程范式强调不同的编程思想和原则。 面向对象编程 函数式编程 lambda是重要特征&#xff0c;以函数为基本单位。 响应式编程 异步数据流交互性强&#xff0c;实时…

《HelloGitHub》第 95 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 Python、Java、Go、C/C、Swift...让你在短时间内…

FRM模型十二:极值理论

目录 极值理论介绍GEVPOT 代码实现 极值理论介绍 在风险管理中&#xff0c;将事件分为高频高损、高频低损、低频高损、低频低损。其中低频高损是一种非常棘手的损失事件&#xff0c;常出现在市场大跌、金融体系崩溃、金融危机以及自然灾害等事件中。 由于很难给极端事件一个准…

案例研究|DataEase助力众陶联应对产业链数据可视化挑战

佛山众陶联供应链服务有限公司&#xff08;以下简称为“众陶联”&#xff09;成立于2016年&#xff0c;是由34家陶瓷企业共同创办的建陶行业工业互联网平台&#xff0c;股东产值占整个行业的22.5%。众陶联以数据赋能为核心&#xff0c;积极探索新的交易和服务模式&#xff0c;构…

智能高侧开关PC8818单通道 40V 80mΩ提供保护和诊断功能高边开关芯片

概述 PC8818是一个80mΩRDS&#xff08;ON&#xff09;高侧开关&#xff0c;提供充分的保护和诊断功能。此设备有两个版本。对于版本A&#xff0c;设备报告FLTn引脚开路排水结构的故障情况。对于版本B&#xff0c;其ISNS引脚输出小电流与流经内部的电流成比例功率FET。用户可以…

Lumerical ------ 文件清理与系统存储空间释放

Lumerical ------ 文件清理与系统存储空间释放 推荐阅读引言正文推荐阅读 Lumerical—文件名后缀的含义 引言 在使用 Lumerical 的过程中,有很多小伙伴们会在运行完成后选择保存工程文件并退出,这样下次进入 .fsp 文件的时候之前的仿真结构和仿真结果都能够得到很好地保存…

【前端素材】推荐优质后台管理系统 Greeva平台模板(附源码)

一、需求分析 1、系统定义 后台管理系统是一种用于管理网站、应用程序或系统的管理界面&#xff0c;通常由管理员和工作人员使用。它提供了访问和控制网站或应用程序后台功能的工具和界面&#xff0c;使其能够管理用户、内容、数据和其他各种功能。 2、功能需求 后台管理系…

释放 群星聚落 时 自动魔免【War3地图编辑器】

文章目录 前言实现原理具体步骤1、创建隐形单位2、新建触发器2.1、新事件开端 2.2、环境→新条件2.3、动作2.3.1、创建单位2.3.2、单位 发布指令(指定单位) 前言 白虎 在斗蛐蛐中又称 白给&#xff0c;因为战绩长期倒数单挑能力和大法师并列倒数第一然而在实战中&#xff0c;大…

SCA 技术进阶系列(五): 揭秘运行时SCA - 新视角下的供应链安全革新

一、静态 SCA 工具的“警报疲劳” SCA 工具在识别和管理应用程序中的第三方依赖及风险方面起着至关重要的作用&#xff0c;是云原生时代下数字供应链风险治理必不可少的基础设施。然而&#xff0c;基于源代码和二进制制品的静态 SCA 工具在落地实践时通常会面临两个让安全运营…

苍穹外卖Day03——解决总结3中存在的问题

解决Day03中存在的问题 1. ResponseBody 与 RequestBody2. RequestParam 与 PathVariable3. 字段填充技术&#xff08;注解、AOP、反射&#xff09;3.1. AOP3.2. 注解3.3. 反射3.5 字段填充在项目应用 4. 阿里云云存储OOS 1. ResponseBody 与 RequestBody ResponseBody&…

VUE3自定义文章排行榜的简单界面

文章目录 一、代码展示二、代码解读三、结果展示 一、代码展示 <template><div class"article-ranking"><div class"header"><h2 class"title">{{ title }}</h2></div><div class"ranking-list&qu…

Django学习记录——管理员-登录注销的实现

1.管理员案例 1.1管理员数据库 1.1.1 表结构 1.1.2 管理员表的建立 class Admin(models.Model):"""管理员表"""username models.CharField(max_length32, verbose_name"用户名")password models.CharField(max_length64, verbose…

韦东山嵌入式Liunx入门驱动开发三

文章目录 一、GPIO和Pinctrl子系统的使用1-1 Pinctrl子系统1-2 GPIO子系统1-3 基于GPIO子系统的LED驱动程序 本人学习完韦老师的视频&#xff0c;因此来复习巩固&#xff0c;写以笔记记之。 韦老师的课比较难&#xff0c;第一遍不知道在说什么&#xff0c;但是坚持看完一遍&…

如何在函数内部定义函数?

在Python中&#xff0c;您可以在一个函数内部定义另一个函数。这种情况下&#xff0c;内部函数的作用域仅限于外部函数&#xff0c;外部函数可以访问内部函数&#xff0c;但外部函数之外的代码无法访问内部函数。那么我们是编程游戏的时候出现一些函数定义的问题&#xff0c;应…

抖音视频批量下载软件|评论数据提取工具

我们团队研发的视频批量下载工具将为您带来全新的视频下载体验&#xff01;在市面上仅能通过单个视频链接提取的无水印工具已经无法满足您的需求&#xff0c;因此我们推出了这款功能强大的工具&#xff0c;不仅支持单个视频链接提取&#xff0c;还可以通过关键词进行视频搜索&a…

Windows WMI详解

WMI简介 WMI ( Windows Management Instrumentation, Windows管理规范)是Windows 2000/XP管理系统的核心&#xff0c;属于管理数据和操作的基础模块。设计WMI的初衷是达到一种通用性&#xff0c;通过WM操作系统、应用程序等来管理本地或者远程资源。它支持分布式组件对象模型(…

基于ssm课程管理系统

基于SSM的课程管理系统的设计与实现 摘 要 当下&#xff0c;正处于信息化的时代&#xff0c;许多行业顺应时代的变化&#xff0c;结合使用计算机技术向数字化、信息化建设迈进。以前学校对于课程信息的管理和控制&#xff0c;采用人工登记的方式保存相关数据&#xff0c;这种以…