当前位置: 首页 > news >正文

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.lryc.cn/news/214531.html

相关文章:

  • PyQt5:构建目标检测算法GUI界面 (附python代码)
  • SV-10A-4G IP网络报警非可视终端 (4G版)
  • 对xml文本元素赋值
  • 【k8s】资源管理命令-陈述式
  • 无需频繁登录支付宝网站即可完成商家转账,实时到账,方便安全快捷
  • Vue 监听属性 watchEffect
  • 设计模式: 关于项目架构,技术选型,技术债务问题与解决方案
  • el-tabs 默认选中第一个
  • R -- match,pmatch,charmatch
  • 数据结构——线性表①(顺序表)
  • MFC网络编程-Udp客户端
  • 密码学基础
  • [Docker]四.Docker部署nodejs项目,部署Mysql,部署Redis,部署Mongodb
  • 拥抱AI-ChatGPT:人类新纪元
  • 基于深度学习的人脸表情识别 计算机竞赛
  • GitHub经常打不开或者访问解决办法
  • 密码学 - SHA-2
  • Vins-Fusion、Vins-Mono(之前那个编译通过但是没有这个好用)
  • 每日自动化提交git
  • 【Linux进程】再谈软件—操作系统(Operator System)
  • 创建超过1G内存大小的程序
  • 如何本地部署Jellyfin影音服务器并实现在公网访问
  • docker fixuid
  • MySQL笔记--SQL语句
  • 线扫相机DALSA-相机平场矫正详细步骤
  • 求购供应发布农业副业产品市场行情小程序开发
  • 框架安全-CVE 复现SpringStrutsLaravelThinkPHP漏洞复现
  • 【腾讯云 HAI域探秘】宝妈也能快速入门AI绘画
  • 归并排序,自顶向下
  • 【案例】3D地球(vue+three.js)