实现效果
如图,我想实现二维码的图片可以根据不同状态进行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;
}