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

实现

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

完整代码

  <div class="lookBtn">
            <el-button icon="el-icon-my-message" size="mini" type="primary" 
                   @click="checkAllTask">
                查看任务
           </el-button>
  </div>

样式代码

    ::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";
    }

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

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

相关文章

Web3时代:探索DAO的未来之路

Web3 的兴起不仅代表着技术进步&#xff0c;更是对人类协作、创新和价值塑造方式的一次重大思考。在 Web3 时代&#xff0c;社区不再仅仅是共同兴趣的聚集点&#xff0c;而变成了一个价值交流和创新的平台。 去中心化&#xff1a;超越技术的革命 去中心化不仅仅是 Web3 的技术…

go 语言介绍

背景 一直有在零散的时间用go写点代码&#xff0c;正好借着最近比较有时间写东西的契机&#xff0c;给这个看着年轻&#xff0c;实际也已经发展10几年&#xff0c;并在当下众多开发领域都有不可忽视作用的语言做个介绍吧 golang 的起点 golang 的诞生可以说是时代造就了它&a…

MolFormer分子预训练模型

Large-scale chemical language representations capture molecular structure and properties&#xff08;2022&#xff0c;NMI&#xff09; 和原本transformer encoder的不同&#xff1a; 采用linear attention mechanismrotary positional embedding 模型 transformer e…

arcgispro中机器学习部分

参考链接 arcgis.learn 模块 |ArcGIS API for Python arcgis包位置 安装路径\GeoScene\Pro\bin\Python\envs\arcgispro-py3\Lib\site-package\arcgis 以automl进行训练工具为例&#xff0c;工具导入模块中涉及机器学习的模块 该模块所在位置 安装路径\GeoScene\Pro\bin\Py…

VCS与XRUN对语法支持的不同点(持续更新...)

静态方法声明位置不同&#xff1a;VCS支持声明在class内/外&#xff08;extern&#xff09;两种方式&#xff0c;XRUN只支持static function声明于类内&#xff0c;不支持类外声明&#xff08;带extern关键字&#xff09;。 字符串转二进制、8进制、十进制、16进制方法&#xf…

回归预测 | Matlab实现SO-CNN-SVM蛇群算法优化卷积神经网络-支持向量机的多输入单输出回归预测

Matlab实现SO-CNN-SVM蛇群算法优化卷积神经网络-支持向量机的多输入单输出回归预测 目录 Matlab实现SO-CNN-SVM蛇群算法优化卷积神经网络-支持向量机的多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.SO-CNN-SVM蛇群算法优化卷积神经网络-支持向量…

javaEE -15( 13000字 JavaScript入门 - 2)

一&#xff1a;JavaScript(WebAPI) JS 分成三个大的部分 ECMAScript: 基础语法部分DOM API: 操作页面结构BOM API: 操作浏览器 WebAPI 就包含了 DOM BOM&#xff0c;这个是 W3C 组织规定的. (和制定 ECMAScript 标准的大佬们不是一伙人). 前面学的 JS 基础语法主要学的是 …

MySQL主从复制---一主一从配置过程

1、mysql版本一致且后台以服务运行 2、主从都配置在[mysqld]结点下&#xff0c;都是小写 3、主机修改my.ini配置文件 配置信息说明&#xff1a; 1、主服务器唯一ID server-id1 2、启用二进制日志 log-bin自己本地的路径/data/mysqlbin log-binD:/devSoft/MySQLServer5.5…

Maven第五章: 搭建maven私服以及如何进行管理?

Maven第五章&#xff1a; 搭建maven私服以及如何进行管理&#xff1f; 前言 nexus是什么&#xff1f; Nexus是Sonatype公司发布的一款仓库&#xff08;Repository&#xff09;管理软件&#xff0c;常用来搭建Maven私服&#xff0c;所以也有人将Nexus称为“Maven仓库管理器”…

高防CDN如何在防护cc上大显神通

高级防御CDN&#xff08;Content Delivery Network&#xff09;在对抗CC&#xff08;HTTP Flood&#xff09;攻击方面扮演着关键的角色&#xff0c;具备以下重要职能和作用&#xff1a; 流量分散&#xff1a;CC攻击的目标是通过大规模的HTTP请求使服务器过载&#xff0c;从而导…

python脚本-读取shadow关键信息并爆破密码

python脚本-读取shadow关键信息并爆破密码 代码 import crypt from colorama import Fore,Styledef crack():# 密码爆破函数定义with open(/root/top1000.txt) as f:# 此处更改密码字典for passwd in f:passwd2crypt.crypt(passwd.strip(),salt)if passwd2 passwd_hash:prin…

css中flexbox和grid的区别

css中flexbox和grid的区别 我们是不是被那些不会按预期排列的元素所影响&#xff1f;这篇文章我们将深入探讨css中flexbox和grid的布局。通过了解他们的主要差异&#xff0c;我们会发现这些布局是如何改变我们网站的风格。 理解CSS布局 css布局是网页设计的一个重要方面&…

stm32整理(三)ADC

1 ADC简介 1.1 ADC 简介 12 位 ADC 是逐次趋近型模数转换器。它具有多达 19 个复用通道&#xff0c;可测量来自 16 个外部 源、两个内部源和 VBAT 通道的信号。这些通道的 A/D 转换可在单次、连续、扫描或不连续 采样模式下进行。ADC 的结果存储在一个左对齐或右对齐的 16 位…

单目标应用:红尾鹰算法(Red‑tailed hawk algorithm ,RTH)求解微电网优化MATLAB

一、微网系统运行优化模型 微电网优化模型介绍&#xff1a; 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 二、红尾鹰算法RTH 红尾鹰算法&#xff08;Red‑tailed hawk algorithm &#xff0c;RTH&#xff09;由Seydali Ferahtia等人于2023年提出&#xff0c;该算法…

[MySQL]索引

目录 概念解释 作用/优点 缺点 适用场景 索引的创建,删除与查看 系统对索引的自动创建 索引建立的时机 索引存储的数据结构 选择B树的原因 B树的原理 查询流程 优点 B树 与B树的区别 优点 概念解释 索引就像是一本字典的目录,我们可以根据目录快速定位到我们想…

高防CDN的特点与作用

高级防护CDN是一种专门设计用于提供出色的网络安全功能的内容分发网络。它通过采用分布式节点、智能路由和强大的安全机制&#xff0c;旨在确保网站在面临各种网络攻击时保持安全&#xff0c;同时提供内容的快速传递和优化功能。那么&#xff0c;高级防护CDN有哪些独特的特点和…

CSS内容过多保留固定字数并显示省略号

一、业务场景&#xff1a; 详情内容过多时&#xff0c;会使布局错乱&#xff0c;需要保留固定的字数&#xff0c;鼠标划上显示出全部内容 三、具体实现步骤&#xff1a; <a-tooltip><template slot"title">{{lastChe}}</template><span class…

红米redmi note7救砖/线刷/ROOT教程

一直循环开机界面&#xff0c;需要刷机 准备 使用windows电脑安装如下 MiUsbDriver.exe电脑连接小米手机驱动。可以去https://www.miui.com/unlock/index.html下载压缩包&#xff0c;里面有这个程序小米ROM固件包找一个适合自己手机型号的的即可&#xff0c;官网也可以下载但…

创建Vite项目

一、创建vite项目 新建vue-test,点击在集成终端中打开&#xff0c;输入npm init vuelatest 输入项目名vue-test 是否使用 TypeScript 语法&#xff1f; 否 / 是 &#xff1b;按tab键输入选择是 依次敲回车 进入vue-test/vuetest目录&#xff0c;安装依赖模块,命令: npm insta…

如何在Linux命令行界面愉快进行性能测试?

本人在做性能测试的过程中&#xff0c;遇到一个问题&#xff0c;测试机选了一台Linux服务器&#xff0c;只有命令行界面。执行测试用例不是非常的灵活&#xff0c;有时候我需要改一两个参数添加一些日志&#xff0c;都需要重新打包部署&#xff0c;虽然自动化构建比较方便&…
最新文章