实现效果
如图,我想实现二维码的图片可以根据不同状态进行disabled的切换,本来是用两个img实现的,但是img还需要设置图片不可点击,虽然css使用cursor:no-drop也能实现,后来突然想到button就默认支持disabled呀,我只用把这个二维码的图片设置为button的自定义图标,我就可以使用button的disabled去控制是否可以点击了

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

<el-button
slot="reference"
type="text"
icon="el-icon-my-qr-code"
:class=" //控制显示图标的颜色
hasIncludeHttpText(row)
? 'qr-code-icon-default'
: 'qr-code-icon-disabled'
"
:disabled="!hasIncludeHttpText(row)"
></el-button>
设置样式需要注意加/deep/,因为这些样式不是在当前组件的,所以不加/deep/设置是没有用的,当然如果不加scoped就不用加/deep/了
.qr-code-icon-default {
/deep/ .el-icon-my-qr-code {
background: url('~@home/assets/images/qr-code-icon.svg') no-repeat;
}
}
.qr-code-icon-disabled {
/deep/ .el-icon-my-qr-code {
background: url('~@home/assets/images/disabled-qr-code-icon.svg') no-repeat;
}
}
/deep/.el-icon-my-qr-code {
font-size: 16px;
background-size: cover;
}
/deep/ .el-icon-my-qr-code:before {
content: '替';
font-size: 16px;
visibility: hidden;
}
本文介绍了一种利用Button元素替代Img来控制二维码图片的可点击状态的方法。通过设置Button的icon属性和disabled状态,结合CSS自定义样式,实现了二维码在正常和disabled两种状态下的切换。代码示例展示了如何根据条件动态应用不同的图标类名,并通过/deep/穿透作用域选择器来修改背景图片。这种方法简化了交互逻辑,提高了代码的可维护性。

4797

被折叠的 条评论
为什么被折叠?



