Vuel+Element中動態修改checkbox勾選框顏色
阿新 • • 發佈:2020-12-09
產品要求:根據使用者輸入的顏色,自動改變checkbox中勾選框顏色
餓了麼文件並沒有提供此方法,於是巧妙地利用css var動態生成顏色變數,掛載到父節點,於是就可以了
話不多說,先康康效果
<el-checkbox-group v-model="val">
<el-checkbox
v-for="(item,index) in list"
:key="index"
:style=" {'--fill-color':'#334CD4'}"
:label="item.title"
/>
</el-checkbox-group>
style樣式(scss)
::v-deep .el-checkbox {
.el-checkbox__label {
color: var(--fill-color);
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: var(--fill-color);
border-color: var(--fill-color)
}
.el-checkbox__input.is-focus .el-checkbox__inner,
.el-checkbox__inner:hover {
border-color: var(--fill-color);
}
}