# Radio 单选框

单选框用于有一个选择,用户只能选择其中一个的场景。

# 平台差异说明

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

# 基本使用

  • 该组件需要搭配radioGroup组件使用,以便用户进行操作时,获得当前单选框组的选中情况,当然,您也可以单独对某个radio进行事件监听
  • 通过v-modelradioGroup组件绑定一个变量,这个绑定的变量是双向的(初始值只能是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

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

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

# 自定义形状

可以通过设置shapesquare或者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-disabledfalse,点击文本时,无法操作radio

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

# API

# Radio Props

注意:radioradio-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 选中时的颜色,如设置radioGroupactive-color将失效 String - -

# radioGroup Props

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

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

# radio Event

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

# radioGroup Event

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