废话不多说直接上代码:
1、给check加类名
2、css样式:
/deep/.image-checkbox .el-checkbox__input .el-checkbox__inner {
/* 隐藏原生复选框 */
display: none;
}
/deep/.image-checkbox .el-checkbox__input {
/* 使用背景图片 */
width: 40px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/deep/.image-checkbox .el-checkbox__input.is-checked {
background-image: url('../../../assets/details/xz.png');
}
/deep/.image-checkbox .el-checkbox__input:not(.is-checked) {
background-image: url('../../../assets/details/wxz.png');
}
/* 方法一的样式补充 */
/deep/.image-checkbox .el-checkbox__input {
width: 20px; /* 设置宽度 */
height: 20px; /* 设置高度 */
background-size: contain; /* 保持图片比例 */
}
最后的结果: