微信小程序使用weui的mp-checkbox要怎么修改ext-

2022-12-13  本文已影响0人  好好学习__天天向上

通过调试器找到要修改的属性名字

image.png
image.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;
    }
上一篇下一篇

猜你喜欢

热点阅读