Question

Radio 单选框 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

• 该组件需要搭配radioGroup组件使用，以便用户进行操作时，获得当前单选框组的选中情况，当然，您也可以单独对某个radio进行事件监听
• 通过v-model给radioGroup组件绑定一个变量，这个绑定的变量是双向的(初始值只能是true或者false)，也就是说，您可以无需监听radio或者radioGroup组件的change事件，也能知道哪个 被勾选了

注意： 由于radio组件需要由radioGroup组件提供参数值，这些父子组件间通过Vue的"provide/inject"特性注入依赖， 所以您必须使用radioGroup包裹radio组件才能正常使用。

<template>
	<view class="">
		<u-radio-group v-model="value" @change="radioGroupChange">
			<u-radio 
				@change="radioChange" 
				v-for="(item, index) in list" :key="index" 
				:name="item.name"
				:disabled="item.disabled"
			>
				{{item.name}}
			</u-radio>
		</u-radio-group>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: 'apple',
					disabled: false
				},
				{
					name: 'banner',
					disabled: false
				},
				{
					name: 'orange',
					disabled: false
				}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: 'orange',
		};
	},
	methods: {
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		}
	}
};
</script>

禁用radio

设置disabled为true，即可禁用某个组件，让用户无法点击，禁用分为两种状态，一是未勾选前禁用，这时只显示一个灰色的区域。二是已勾选后 再禁用，会有灰色的勾选的图标，但此时依然是不可操作的。

<u-radio-group v-model="value"
	<u-radio :disabled="true">明月几时有</u-radio>
</u-radio-group>

自定义形状

可以通过设置shape为square或者circle，将单选框设置为方形或者圆形

<u-radio-group v-model="value">
	<u-radio shape="circle">月明人倚楼</u-radio>
</u-radio-group>

自定义颜色

此处所指的颜色，为radio选中时的背景颜色，参数为active-color

<u-radio-group v-model="value">
	<u-radio active-color="red">思悠悠，恨悠悠，恨到归时方始休</u-radio>
</u-radio-group>

文本是否可点击

设置label-disabled为false，点击文本时，无法操作radio

<u-radio-group v-model="value">
	<u-radio :label-disabled="false">门掩黄昏，无计留春住</u-radio>
</u-radio-group>

API

Radio Props

注意：radio和radio-group二者同名参数中，radio的参数优先级更高。

参数	说明	类型	默认值	可选值
icon-size	图标大小，单位rpx	String | Number	-	-
label-size	label字体大小，单位rpx	String | Number	-	-
name	radio组件的标示符	String | Number	-	-
shape	形状，见上方说明	String	-	circle / square
disabled	是否禁用	Boolean	-	false / true
label-disabled	是否禁止点击文本操作radio	Boolean	-	true / false
active-color	选中时的颜色，如设置radioGroup的active-color将失效	String	-	-

radioGroup Props

注意：需要给radioGroup组件通过v-model绑定一个变量，来初始化radio的状态，随后该值被双向绑定， 当用户勾单选框时，该值在radio内部被修改为name值，并反映到父组件，换言之，您无需监听radio的change事件，也能知道哪个radio被选中了。

参数	说明	类型	默认值	可选值
v-model	被选中radio双向绑定的值，如果初始值为某一个radio的name，该radio将会默认被选中	String \ Number	-	-
disabled	是否禁用所有radio	Boolean	false	true
label-disabled 1.5.2	是否禁止点击文本操作radio	Boolean	false	true
shape 1.5.2	形状，见上方说明	String	circle	square
icon-size 1.5.2	图标大小，单位rpx	String \ Number	20	-
active-color	选中时的颜色，应用到所有子Radio组件	String	#2979ff	-
size	radio组件整体的大小，单位rpx	String \ Number	34	-
width 1.3.0	radio的宽度，需带单位，如50%，150rpx	String | Number	auto	-
wrap 1.3.0	是否每个radio占一行	Boolean	false	true

radio Event

事件名	说明	回调参数	版本
change	某个radio状态发生变化时触发(选中状态)	name: 通过props传递的name参数	-

radioGroup Event

事件名	说明	回调参数	版本
change	任一个radio状态发生变化时触发	name: 值为radio通过props传递的name值	-