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

news2024/11/27 9:40:58

实现

在这里插入图片描述

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.coloradmin.cn/o/1160633.html

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

相关文章

五种删除办公文件空白的方法

方法一:Shift键删除空白页 将光标定位在文档末尾,然后按住「Shift」键不松,鼠标单击选中空白页面,然后按下「Backspace或Delete」键即可删除空白页。 方法二:分页符删除空白页 有一些空白页,即便是使用了Shift键删除法也无法删除,那么这个时候就要看看是不是插入了分页…

vi vim 末尾编辑按GA 在最后一行下方新增一行编辑按Go

vim 快速跳到文件末尾 在最后一行下方新增一行 移到末尾,并且进入文本录入模式 GA (大写G大写A) 在一般模式(刚进入的模式,esc模式) GA 或 Shift ga 先 G 或 shiftg 到最后一行 然后 A 或 shifta 到本行末尾 并且进入文本录入模式 在最后一行下方新增一行 (光标换行,文字不…

06 # 手写 map 方法

map 的使用 map 自带循环功能&#xff0c;对数据中的元素进行加工&#xff0c;得到一个加工后的新数据 ele&#xff1a;表示数组中的每一个元素index&#xff1a;表示数据中元素的索引array&#xff1a;表示数组 <script>var arr [1, 3, 5, 7, 9];var result arr.ma…

使用Dockerfile生成docker自定义镜像

Dockerfile常用指令 • FROM 构建镜像基于哪个镜像 • MAINTAINER 镜像维护者姓名或邮箱地址 • RUN 构建镜像时运行的指令,执行一条RUN镜像就会叠加一层&#xff0c;因此RUN尽可能一条写完 • ADD 拷贝文件或目录到容器中&#xff0c;如果是URL或压缩包便会自动下载或自动解压…

从0开始搭建一个前端项目的架子

目录 1.概述 2.项目搭建 3.elementUI 4.CSS预处理器 5.重置CSS 6.图标库 7.axios和路由 7.1.axios 7.2.路由 7.3.路由懒加载和异步组件 1.概述 在古早时代&#xff0c;只需要会html、css、js、ajax就能开发一个前端项目&#xff0c;这些技术的上手成本也不高&#x…

RK3588平台开发系列讲解(项目篇)基于yolov5的物体识别

平台内核版本安卓版本RK3588Linux 5.10Android 12文章目录 一、实验环境二、源码&工具三、环境搭建3.1、安装 Miniconda3.2、创建 RKNN 虚拟环境3.3、安装 RKNN-ToolkitLite 2 软件包3.4、安装 opencv四、实验沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 本篇将…

Opencv学习笔记(最近更新2023.11.1)

文章目录 棋盘格角点检测findChessboardCorners()亚像素角点检测cornerSubPix(&#xff09;棋盘格角点的绘制drawChessboardCorners()计算外参solvePnPRansac()旋转向量转旋转矩阵Rodrigues()鱼眼畸变矫正initUndistortRectifyMap()检测轮廓findContours()轮廓显示drawContours…

Chatgpt批量改写文章网页版可多开软件-自动登录换号生成word或者TXT

Chatgpt批量改写文章网页版可多开软件介绍&#xff1a; 1、改写后生成docx格式文档和生成txt文档二选一。 2、支持原来docx文档里带图片的改写&#xff0c;改写伪原创后的docx里也带图片。 3、软件可以设置是否开启标题改写&#xff0c;可以自定义标题改写指令。 4、可以设置…

野火霸天虎 STM32F407 学习笔记_1 stm32介绍;调试方法介绍

STM32入门——基于野火 F407 霸天虎课程学习 前言 博主开始探索嵌入式以来&#xff0c;其实很早就开始玩 stm32 了。但是学了一段时间之后总是感觉还是很没有头绪&#xff0c;不知道在学什么。前前后后分别尝试了江协科技、正点原子、野火霸天虎三次 stm32 的课程学习。江协科…

Ps:魔棒工具

魔棒工具 Magic Wand Tool可以基于颜色和色调快速选择图像上相似的像素区域。 快捷键&#xff1a;W ◆ ◆ ◆ 常用操作方法与技巧 1、在单击取样之前查看和设置工具选项栏上的选项。 选项&#xff1a;取样大小 若要选取纯色区域&#xff0c;可使用“取样点”。而对于分辨率较…

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

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

设计模式之两阶段终止模式

文章目录 1. 简介 2. 常见思路3. 代码实战 1. 简介 两阶段终止模式&#xff08;Two-Phase Termination Pattern&#xff09;是一种软件设计模式&#xff0c;用于管理线程或进程的生命周期。它包括两个阶段&#xff1a;第一阶段是准备阶段&#xff0c;该阶段用于准备线程或进程…

Hadoop PseudoDistributed Mode 伪分布式

Hadoop PseudoDistributed Mode 伪分布式加粗样式 hadoop101hadoop102hadoop103192.168.171.101192.168.171.102192.168.171.103namenodesecondary namenoderecource managerdatanodedatanodedatanodenodemanagernodemanagernodemanagerjob historyjob logjob logjob log 1. …

WINCC7.5-根据时间跨度选择趋势

yyyy-MM-dd hh:mm:ss “yyyy”&#xff1a;表示四位数的年份&#xff0c;例如&#xff1a;2022。 “MM”&#xff1a;表示两位数的月份&#xff0c;从01到12。 “dd”&#xff1a;表示两位数的日期&#xff0c;从01到31。 “hh”&#xff1a;表示12小时制的小时数&#xff0c;从…

vue实现拖拽拉伸容器宽度

效果 实现逻辑 监听鼠标按下事件&#xff0c;设置滑条背景色&#xff0c;left距离&#xff0c;记录初始位置&#xff0c;捕获鼠标监听鼠标拖动事件&#xff0c;获取移动的距离&#xff0c;设置左侧区域与右侧区域的宽度&#xff0c;滑条的left值监听鼠标松开事件&#xff0c…

【算能】cmake版本不对应

fatal error: boost/numeric/ublas/matrix.hpp: No such file or directory#include <boost/numeric/ublas/matrix.hpp> 解决方法&#xff1a; 这是由于cmake版本不对应&#xff0c;应该提高版本&#xff0c;是的C的编译成功

Redis系统学习(高级篇)-Redis主从集群

目录 一、搭建主从集群 二、主从数据同步的原理 三、repl_backlog原理 四、主从同步优化 五、小结 一、搭建主从集群 为了提高高并发&#xff0c;主从集群是很有必要的&#xff0c;因为这样可以实现读写分离&#xff0c;主节点负责写&#xff0c;从节点就只负责读&#xf…

ARM 版 OpenEuler 22.03 部署 KubeSphere v3.4.0 不完全指南续篇

作者&#xff1a;运维有术 前言 知识点 定级&#xff1a;入门级KubeKey 安装部署 ARM 版 KubeSphere 和 KubernetesARM 版 KubeSphere 和 Kubernetes 常见问题 实战服务器配置 (个人云上测试服务器) 主机名IPCPU内存系统盘数据盘用途ks-master-1172.16.33.1661650200KubeSp…

攻防世界-web-bug

1. 问题描述 没有额外的描述&#xff0c;仅仅是这样的一个登录界面 但是&#xff0c;我们注意到有注册&#xff08;Register&#xff09;和找回密码&#xff08;Findpwd&#xff09;这俩按钮 注册界面如下&#xff1a;需要输入用户名&#xff0c;密码&#xff0c;生日及地址 …

《 博弈论教程(罗云峰版) 》——习题二答案

前言 博弈论这门课程&#xff0c;我们主要参考的教材是《博弈论教程&#xff08;罗云峰版&#xff09;》&#xff0c;但是罗老师的课后习题并没有给出完整的答案&#xff0c;秉着学习的态度&#xff0c;本人结合教材和 PPT 在这里给出课后习题的答案。 由于我们只学了完全信息…