uni-app checkbox 全选的实现 与checkbox默认样式的更改

uni-app checkbox 全选的实现

H5部分代码

<view class="list-title row between">
					<checkbox-group name="allCheck" @change="allChange">
						<label class="row uni-list-cell uni-list-cell-pd">
							<checkbox value="" :checked="allCheck.checked" />
							<view>全选</view>
						</label>
					</checkbox-group>
				</view>
				<view class="list">
					<checkbox-group @change="checkboxChange">
						<view class="row between food-list" v-for="(item,index) in showList" :key="index">
							<label class="row">
								<checkbox :value="JSON.stringify(item)" :checked="item.checked" />
								<view>{{item.name}}</view>
							</label>
						</view>
					</checkbox-group>
				</view>

js部分的代码

export default {
		data() {
			return {
				allCheck: {
					name: '全选',
					value: 'all',
					checked: false
				}
			}
		},
		created() {
			this.init();
		},
		methods: {
		//默认全部选中
			init() {
					this.showList.map(item => this.$set(item, 'checked', true));
					this.$set(this.allCheck, 'checked', true);
			},
			//点击全部选中的事件
			allChange(e) {
				if (e.detail.value.length == 0) {
					this.showList.map(item => this.$set(item, 'checked', false));
					this.$set(this.allCheck, 'checked', false);
				} else {
					this.showList.map(item => this.$set(item, 'checked', true));
					this.$set(this.allCheck, 'checked', true);
				}
			},
			//点击列表中复选框的事件
			checkboxChange(e) {
				let values = e.detail.value;
				this.outList = [];
				for (let i = 0, lenI = values.length; i < lenI; ++i) {
					const item = JSON.parse(values[i])

					this.outList.push(item)
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				// 判断全选 选择框的状态
				if (this.outList.length == this.showList.length) {
					this.$set(this.allCheck, 'checked', true)
				} else {
					this.$set(this.allCheck, 'checked', false)
				}
			}
		}
	}

uni-app checkbox默认样式的更改

uni-checkbox .uni-checkbox-input {
		border-radius: 50% !important;
		transform:scale(0.8)
	}
	
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background-image: url(./static/icon/checked.png);
		background-size: 100%;
	}
	
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
		width: 20rpx;
		height: 20rpx;
		line-height: 20rpx;
		text-align: center;
		font-size: 0px;
		background-repeat: no-repeat;
		border-color: #38CAED;
		transform: translate(-80%, -50%) scale(1);
		-webkit-transform: translate(-70%, -50%) scale(1);
	}

注意！！ 要在APP.vue 里更改checkbox默认样式，在组件中更改不生效。