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.mzph.cn/news/127050.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS与基本选择器

<div class"c1" id"d1"></div> CSS基本知识 什么是css&#xff1a;CSS&#xff08;Cascading Style Sheet&#xff0c;层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表&#xff0c;他就会按照这个样式l来进行渲染。其实就是让HT…

ChatGPT火了:还有哪些可以做的变现项目

一、写在前面 柴特鸡皮踢 大家都不陌生了 说实话&#xff0c;Chatgpt火了后&#xff0c;正经的项目没出来多少&#xff0c;出了一大批割九菜的。 为什么说是割韭菜&#xff0c;因为一群完全不懂技术&#xff0c;只会讲讲成功学、写作学、财经的大V也敢开社群、卖课。很多人听…

Linux中正则表达式等

grep命令&#xff1a;主要作用就是过滤查找文本内容 常用的选项有&#xff1a; -m 数字:匹配几次之后停止&#xff0c;按行匹配&#xff0c;不是按字符个数&#xff0c;例如 -v:取反 例如: -n:显示匹配的行号 例如&#xff1a; -c:仅显示匹配的行数&#xff0c;不显示匹配内…

基于Docker-consul容器服务更新与发现

目录 一、什么是服务注册与发现&#xff1a; 二、Docker-consul介绍&#xff1a; 三、consul的关键特性&#xff1a; 四、consul部署&#xff1a; 1.部署规划&#xff1a; 2.consul服务器部署&#xff1a; 2.1 建立consul服务&#xff1a; 启动consul后默认会监听5个端口&a…

c++ 实现二叉搜索树

二叉搜索树的概念 二叉搜索树 (BST&#xff0c;Binary Search Tree)&#xff0c;也称二叉排序树或二叉查找树。它要么是一颗空树&#xff0c;要么是满足以下性质的二叉树&#xff1a; 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值。若它的右子树不为…

Ubuntu MySQL客户端功能介绍(mysql-client)mysql命令(mysql客户端命令)数据库导出、数据库导入

文章目录 Ubuntu MySQL客户端(mysql-client)功能介绍MySQL客户端与服务端服务器端&#xff08;MySQL Server&#xff09;客户端&#xff08;MySQL Client&#xff09; 安装MySQL客户端连接到MySQL服务器&#xff08;mysql -h host -u user -p&#xff09;执行SQL查询批处理模式…

利用chatgpt大语言模型来做数据预处理

数据预处理是机器学习中的一个重要步骤&#xff0c;包括数据清洗、数据转换、特征选择等。这些步骤通常需要人工进行&#xff0c;或者使用专门的数据预处理工具和库&#xff0c;如Python的Pandas库、Scikit-learn库等。 今天我们将利用chatgpt(国内版本-小策智能问答)的辅助帮…

Spring - 手写模拟Spring底层原理

手写Spring 定义配置类AppConfig ComponentScan("com.spring.zsj") public class AppConfig {Beanpublic ApplicationListener applicationListener() {return new ApplicationListener() {Overridepublic void onApplicationEvent(ApplicationEvent event) {System…

Fabric二进制添加排序节点

目录 一、准备orderer11.1、注册orderer11.2、登记orderer11.3、登记orderer1的tls 二、添加orderer1的tls到系统通道三、获取最新的系统通道配置四、启动orderer1五、添加orderer1的endpoint到系统通道六、添加orderer1的tls到应用通道七、添加orderer1的endpoint到应用通道八…

【案例】3D地球(vue+three.js)

需要下载插件 <template><div class"demo"><div id"container" ref"content"></div></div> </template> <script> import * as THREE from three; // import mapJSON from ../map.json; import { Or…

pytorch 笔记:KLDivLoss

1 介绍 对于具有相同形状的张量 ypred​ 和 ytrue&#xff08;ypred​ 是输入&#xff0c;ytrue​ 是目标&#xff09;&#xff0c;定义逐点KL散度为&#xff1a; 为了在计算时避免下溢问题&#xff0c;此KLDivLoss期望输入在对数空间中。如果log_targetTrue&#xff0c;则目标…

【mediasoup-sfu-cpp】4: SfuDemo:join并发布视频创建RTCTransport流程分析

【mediasoup-sfu-cpp】3: SfuDemo:加入会议 有点卡,在本篇进行日志流程分析。demo\controller/RoomsController.hpp 创建router create() config.mediasoup.routerOptions++++++:OnSuccess D:\XTRANS\soup\mediasoup-sfu-cpp\demo\controller/RoomsController.hpp: Line 71: …

数据库高速缓存配置

数据库一般都配置数据高速缓存&#xff0c;并且可以高速缓存中按页大小分不同的缓冲池。 Oracle&#xff1a; db_cache_size是指db_block_size对应的缓冲池&#xff0c;也可以指定非db_block_size的缓冲池&#xff0c;一般也都会再配置一个32K的缓冲池&#xff0c;两个缓冲池加…

(CV)论文列表

CNN卷积神经网络之SKNet及代码 https://blog.csdn.net/qq_41917697/article/details/122791002 【CVPR2022 oral】MixFormer: Mixing Features across Windows and Dimensions 【精选】【CVPR2022 oral】MixFormer: Mixing Features across Windows and Dimensions-CSDN博客

软考考前提醒:准考证打印、注意事项!

一、准考证打印 打印时间&#xff1a;10月30日~11月3日 重要提醒&#xff1a;打印入口即将关闭&#xff0c;还没打印的朋友要抓紧时间&#xff0c;以免无法参加考试&#xff01;&#xff01;&#xff01; 准考证打印流程 登录中国计算机技术职业资格网&#xff0c;点击【报…

新一代构建工具Vite-xyphf

一、什么vite? vite:是一款思维比较前卫而且先进的构建工具,他解决了一些webpack解决不了的问题——在开发环境下可以实现按需编译&#xff0c;加快了开发速度。而在生产环境下&#xff0c;它使用Rollup进行打包&#xff0c;提供更好的tree-shaking、代码压缩和性能优化&…

grafana docker安装

grafana docker安装 Grafana是一款用Go语言开发的开源数据可视化工具&#xff0c;可以做数据监控和数据统计&#xff0c;带有告警功能。目前使用grafana的公司有很多&#xff0c;如paypal、ebay、intel等。 Grafana 是 Graphite 和 InfluxDB 仪表盘和图形编辑器。Grafana 是开…

基于开源IM即时通讯框架MobileIMSDK:RainbowChat-iOS端v8.0版已发布

关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架&#xff0c;超轻量级、高度提炼&#xff0c;一套API优雅支持 UDP 、TCP 、WebSocket 三种协议&#xff0c;支持 iOS、Android、H5、标准Java、小程序、Uniapp&#xff0c;服务端基于Netty编写。 工程…

计算机网络-应用层

文章目录 应用层协议原理万维网和HTTP协议万维网概述统一资源定位符HTML文档 超文本传输协议&#xff08;HTTP&#xff09;HTTP报文格式请求报文响应报文cookie 万维网缓存与代理服务器 DNS系统域名空间域名服务器和资源记录域名解析过程递归查询迭代查询 动态主机配置协议&…

每日刷题_

前k个高频元素 347. 前 K 个高频元素 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 一共有三种不同的题解&#xff1a; 1、把数据存到哈希表中&#xff0c;然后通过哈希表来排序&#xff0c;时间复杂度…