微信小程序使用weui的mp-checkbox要怎么修改ext-
2022-12-13 本文已影响0人
好好学习__天天向上
通过调试器找到要修改的属性名字
image.pngimage.png 把要修改的属性写到weui的checkbox开放的属性ext-class里,再在wxss里修改即可。
weui链接地址:Checkbox-group和Checkbox | wechat-miniprogram / weui
<mp-checkbox-group prop="radio" multi="{{false}}" bindchange="radioChange">
<mp-checkbox wx:for="{{radioItems}}" wx:key="value" class="{{item.disable?'disable-class':''}}" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}" ext-class=".checkbox--weui-check[checked]+.checkbox--weui-icon-checked weui-cell__bd"></mp-checkbox>
</mp-checkbox-group>
data: {
radioItems: [
{ name: '单选选项一', value: '0', checked: true },
{ name: '单选选项二', value: '1' },
],
.checkbox--weui-check[checked]+.checkbox--weui-icon-checked {
color: var(--main-color);
}
.weui-cell__bd {
font-size: var(--font-size-md);
}
.disable-checkbox {
color: #999;
pointer-events: none;
}