el-button 全局添加自定义icon图标

概要

        我们想要一个导出图标,发现element ui 里面的 icon 图标没有适合我们的,我们是不是想着直接去在按钮上插入一张图片就行了!!!
        这种方法只能解决燃眉之急,每次都得插入一张图片和样式代码,久而久之代码就有点累赘了。我们可以进行全局引入这个图标,在按钮上配置两个属性就可以了!!!

整体架构流程

<el-button  class="el-bottom-dc" icon="el-icon-my-dc" type="primary" @click="exportFile">导出</el-button>

        我们在 button里面配置 icon="el-icon-my-dc" 时候,可以去控制台看一下这个按钮是不是插入一个 i 标签

        这时候我们就给这个按钮一个类名 class="el-bottom-dc" 方便我们获取里面的 i 标签 

        啥也不说上代码

.el-bottom-dc {
	line-height: var(--fontSize);
	 .el-icon-my-dc {
		background: url('../assets/images/dc.png') no-repeat;
		width: 18px;
		height: 13px;
	}
}

        我们把 scss代码 放在全局样式中,方便我们全局获取到该样式,是不是觉得超简单的!

        之后的按钮想用到这个图标就配置 class="el-bottom-dc" icon="el-icon-my-dc" 这两个属性就可以了

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值