element button custom icon

achieve effect

As shown in the picture, I want to realize that the QR code pictures can be disabledswitched according to different states. Originally, I used two imgto implement it, but imgI also need to set the pictures to be non-clickable. Although it can be achieved cssby using it cursor:no-drop, it suddenly occurred to me that buttonit will be supported by default disabled. I Just set the image of this QR code as buttona custom icon, and I can use it buttonto disabledcontrol whether it can be clicked.
Insert image description here

Code

buttonCustomize iconan icon name with the attribute. This custom icon name will be added to the buttonlower ilabel by default class. We only need to set ithe style of the label.
Insert image description here

     <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>

You need to pay attention when setting styles /deep/. Because these styles are not in the current component, /deep/it is useless if you don’t set them. Of course, if you do n’t add them, scopedyou don’t need to add /deep/them .

.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;
}