uni-app组件总结三：picker日期和时间、单选、复选

日期 mode=“date”

时间 mode=“time”

1. 设置开始时间和结束时间 start end
2. v-model和:value效果一样
3. 都需要设置change事件给相应的值赋
   为了不写那么多change事件，可以设置date-target
   因为写惯了vue所以不能双向绑定的就用value 能的就用v-model

		DateChange(e){
			var key=e.currentTarget.dataset.target;
			this.item[key]=e.detail.value;
		}

<view class="cu-form-group">
			<view class="title">日期</view>
			<picker mode="date" :value="item.date" :start="startDate" @change="DateChange" data-target="date">
				<view class="picker">
					{{item.date?item.date:'请选择'}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">时间={{item.time}}</view>
			<picker mode="time" :value="item.time" @change="DateChange" data-target="time">
				<view class="picker">
					{{item.time?item.time:'请选择'}}
				</view>
			</picker>
		</view>

效果

单选radio

		<view class="cu-form-group margin-top">
			<view class="title">是否启动：{{item.startUp}}</view>
			<radio-group :value="item.startUp" @change="DateChange" data-target="startUp">
				<label class="radio">
					<radio :class="item.startUp == '是' ? 'checked' : ''" :checked="item.startUp == '是' ? true : false" value="是" />
					是
				</label>
				<label class="radio margin-left">
					<radio :class="item.startUp == '否' ? 'checked' : ''" :checked="item.startUp == '否' ? true : false" value="否" />
					否
				</label>
			</radio-group>
		</view>
		<view class="cu-form-group margin-top">
			<view class="title">性别：{{item.sex}}</view>
			<radio-group :value="item.sex"  @change="DateChange" data-target="sex">
				<label class="radio margin-left" v-for="(val,index) in sexList2" :key="index">
					<radio :class="item.sex == val.value ? 'checked' : ''" :checked="item.sex == val.value ? true : false" :value="val.value" />
					{{val.label}}
				</label>
			</radio-group>
		</view>

效果

如果都不选的时候disabled的情况上面有个对勾，容易让别人误会,可以自定义disabled图标的样式

radio[disabled]::before{
	display: none;
}
radio[checked]::before{
	display: inline-block;
}

checkbox复选框

		<view class="margin-top">
			<checkbox-group class="block" :value="item.check" @change="checkChange">
				<view class="cu-list menu text-left">
					<view class="cu-item" v-for="item in sexList2" :key="item.value">
						<label class="flex justify-between align-center flex-sub">
							<view class="flex-sub">{{ item.label }}</view>
							<checkbox :value="item.value" :checked="item.checked"></checkbox>
						</label>
					</view>
				</view>
			</checkbox-group>
		</view>

		checkChange(e) {
			var items = this.sexList2,
				values = e.detail.value;
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i];
				if (values.includes(item.value)) {
					this.$set(item, 'checked', true);
				} else {
					this.$set(item, 'checked', false);
				}
			}
			this.item.check=values;
		},
		clear() {
			var items = this.sexList2
			//清空
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				this.$set(items[i], 'checked', false);
			}
		
		},

效果