1、checkbox 样式更改
1、<checkbox :checked="radioFlag" style="transform:scale(0.7)"/>
/*checkbox选中后样式 */
checkbox .wx-checkbox-input {
border-radius: 50% !important;
}
/*checkbox选中后图标样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
color: #fff;
background: #1F659A;;
border: 1rpx solid #ffffff;
}
效果如下:
2、<checkbox style="transform:scale(0.7)" disabled checked/>
/*checkbox选中后样式 */
checkbox .wx-checkbox-input, checkbox .uni-checkbox-input {
border-radius: 50% !important;
// border: 1rpx solid #979797;
}
/*checkbox选中后图标样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked,
checkbox .uni-checkbox-input.uni-checkbox-input-checked{
color: #fff!important;
background: #0080C0;
border: 1rpx solid #0080C0;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before,
checkbox .uni-checkbox-input-checked::before {
color: #fff!important;
}
改后:
2、checkbox-group多个选框
<checkbox-group>
<view class="card" v-for="(item, index) in deviceList" :key="index" @click="equipmentDetail(item)">
<view class="top">
<view class="top-l">
<!-- <checkbox
v-show="selectFlag"
color="#FF8B1A"
class="selectRadio"
:value="item.aeratorRegulator.id"
:checked="checkList.includes(item.aeratorRegulator.id)"
@click.stop="checkRadioChange(item.aeratorRegulator.id)"
/> -->
<image v-show="!selectFlag" :src="$IMAGE_HOST +'/m-controller.svg'" mode=""></image>
<span class="device">{{item.aeratorRegulator.id}}控制器 {{ `${item.aeratorRegulator.name}:${item.aeratorRegulator.eui}` }}</span>
</view>
<view class="top-r">
<image :src="$IMAGE_HOST +'/right.svg'" mode=""></image>
</view>
</view>
<view class="bottom">
<span class="fishPond">{{ item.aquafarmName }} 鱼塘</span>
<span class="service">{{item.service}}</span>
</view>
</view>
</checkbox-group>
/**
* 单选
*/
checkRadioChange(id) {
console.log('id')
console.log(id)
let that = this;
let _checkList = that.checkList
if (_checkList.indexOf(id) == -1) {
_checkList.push(id); //选中添加到数组里
} else {
_checkList.splice(_checkList.indexOf(id), 1); //取消
}
console.log(_checkList)
this.$set(this, 'totalNum', _checkList.length)
},