本文分享的radio组件为uni-app的内置组件radio，非扩展组件，两者在用法上其实大同小异，只是扩展组件的属性以及事件更多…没有本质上的区别～

一. 简介

radio，单选框，图形化界面基础组件之一，常用于表单中单选选项时的业务场景，如用户注册时的性别选择；

二. 基础用法

基础用法如下：

<radio />篮球

在基础用法下，uni-app将 启用一组内置在raido组件内部的默认参数（包括颜色，勾选状态，禁用状态等等），其表现形态 效果图 如下：

但 这种用法无法正常应用于实际的业务场景，原因是因为 单选框往往是成组的形式出现，比如性别选择，单选题 如果单选题只有一道，那还选什么…对吧；所以，为了引入组的概念除 radio标签 之外，还额外提供了一个新的标签 radio-group标签，基本用法如下：

<radio-group>
  <radio />
  男
  <radio />
  女
</radio-group>

其表现形态 效果图 如下：

通过 radio-group标签 的框定，使得radio被分为了一组～同一组下的radio将自动实现互斥选中，示例如下：

三. value属性

value属性，用于代表radio的标识，什么是标识，简单的说就是内置在radio上用于被系统或者代码识别的值，这个值具有 唯一性，说明如下

参数	说明	类型	默认值
value	标识。当该 选中时， 的 change 事件会携带 的 value	String

代码示例如下：

<!-- value属性 -->
<radio-group>
  <radio value="man" />
  男
  <radio value="woman" />
  女
</radio-group>

对于 标识 可能还是有小伙伴不大明白，那就再换一个说法，一个正常的radio往往会存在两个值：

• 一个用于 显示在用户UI界面的显示值，比如示例中的：男，女等显示文字，这类显示值的 长度长短不一，毕竟 选项的内容具有不确定性，在非常多问卷调查类型的业务场景中，选项的长度往往非常长，甚至有的会有好几行；
• 另外一个是 内置在radio的标识，这类值代表着这个单选框在系统内部或者说在代码层面上的可识别值，这个值会被用来运算，逻辑处理等等操作，并且这个值是 唯一的；

如果值没有被区分或者干脆就没有内部的标识，试想一下，假设需要显示的值非常长，甚至是文章中的一整个段落，难道将这个段落一直在代码中进行逻辑运算吗，显然这是不合适的

<radio-group>
  <radio value="这是一个关于篮球文章的段落，假设锻炼有100个汉字" />这是一个关于篮球文章的段落，假设锻炼有100个汉字
  <radio value="这是一个关于足球文章的段落，假设锻炼有500个汉字" />这是一个关于足球文章的段落，假设锻炼有500个汉字
  <radio value="这是一个关于网球文章的段落，假设锻炼有50个汉字" />这是一个关于网球文章的段落，假设锻炼有50个汉字
</radio-group>

四. disabled禁用属性

disabled属性，用于控制radio是否可选中，当单选框框处于 disabled状态 下时，单选框的形态将 不可再进行选中操作，值得注意的是，此时的单选框没有较大的UI变化；

参数	说明	类型	默认值
disabled	当前单选框是否禁用	Boolean	false

代码示例如下：

<!-- disabled禁用属性 -->
<radio-group>
  <radio :disabled="true" />
  篮球
  <radio disabled />
  足球
  <radio />
  乒乓球
</radio-group>

其表现形态展示的 效果图 如下：

当依次点击：篮球，足球，乒乓球时，只有乒乓球可以被选中，也就代表前两者已经被disabled了；

五. checked选中属性

5.1 说明

checked属性，用于控制单选框是否默认处于选中状态，当单选框处于 :checked="true" 值时，单选框将默认选中，参数说明如下：

参数	说明	类型	默认值
checked	当前是否选中，可用来设置默认选中	Boolean	false

演示代码如下：

<!-- checked禁用属性 -->
<radio-group>
  <radio checked />
  篮球
  <radio />
  足球
  <radio />
  网球
</radio-group>

其表现形态展示的 效果图 如下：

5.2 异常选中（多项）

和复选框不同，单选框是不能被多选的，但是如果在代码层面 有多个radio被checked，那么会不会出现异常，示例代码如下：

<!-- checked选中属性 -->
<radio-group>
  <radio checked />
  篮球
  <radio checked />
  足球
  <radio />
  网球
</radio-group>

其表现形态展示的 效果图 如下：

确认发现 后者会被默认选中，前者自动被覆盖了，处于未选中状态，切换则正常切换

六. color颜色属性

6.1 说明

color属性，用于控制单选框内部选中时勾形图标的颜色，参数说明如下：

参数	说明	类型	默认值
color	radio的颜色，同css的color	String

不同的 color值将直接作用于勾形图标，另外，由于等同与CSS的color，因此值可以是具体的 颜色，色号，rgb 以及 rgba，示例代码如下：

<!-- color颜色属性 -->
<radio-group>
  <radio checked color="#FFCC33" />
  篮球
  <radio checked color="red" />
  足球
  <radio checked color="rgba(0,0,0,1)" />
  网球
  <radio checked color="rgb(0,0,0)" />
  乒乓球
</radio-group>

其表现形态 效果图 如下：

我们在基础用法中有一个 不带任何参数的示例，虽然使用时不带任何参数，但在组件内部color色其实是有 默认值 的，这个默认值跟随平台而定；

6.2 平台差异

另外，我们知道uni-app是一个跨平台的解决方案，因此 某些属性在编译后存在一定的平台差异，在没有任何颜色设定的情况下，单选框的选中颜色有所区别，颜色会跟随系统平台而定，具体如下：

微信小程序、360小程序	App、H5、百度小程序、支付宝小程序、飞书小程序、快应用、QQ小程序	字节跳动小程序
绿色	蓝色	红色

也就是说，我们 在uni-app中不为radio设定color属性，那么选中的颜色在 微信小程序 中会显示成 绿色，在 支付宝小程序 会显示成 蓝色，在 字节跳动小程序 中会显示成 红色；

七. 事件

在uni-app中的事件机制完全遵循于Vue的语法，那么理所当然的radio的事件也遵循Vue的语法，radio提供了一个change事件，注意该事件绑定的位置在 radio-group 上，毕竟只有在 radio-group 上才可以获取到这一组radio上的值 ，这个事件带一个默认，参数的值为当前的事件参数集合，说明如下：

属性名	类型	默认值	说明
@change	EventHandle
中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

示例代码如下：

<template>
	<view class="radio-conatiner">
		<!-- 事件 -->
		<view class="radio-group">
			<h4>change事件</h4>
			<!-- 事件 -->
			<radio-group @change="handleChange">
				<radio value="Basketball" color="#FFCC33" />
				篮球
				<radio value="Football" color="red" />
				足球
				<radio value="pingPong" color="rgb(0,0,0)" />
				乒乓球
			</radio-group>
			{{ value }}
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: ''
		};
	},
	methods: {
		handleChange(e) {
			this.value = e.detail.value;
		}
	}
};
</script>

其表现形态 效果图 如下：

从效果图中可以看出，radio选中与取消选中时都会触发 radio-group 上的change事件，实际业务开发中可以在change事件中进行业务处理；

八. demo示例演示

本节期望通过一个具体的示例来更加清晰的描述 radio 的用法，demo实现的功能大致如下：从data中取到 radio 的list，使用v-for指令动态生成 radio，之后使用button获取到 radio 选中项的值
第一步：使用v-for动态生成radio列表；

<!-- demo示例 -->
<radio-group>
  <radio v-for="item in list" :value="item.value" :key="item.value">{{ item.title }}</radio>
</radio-group>

<script>
export default {
	data() {
		return {
			list: [
				{
					title: '篮球',
					value: 'bb'
				},
				{
					title: '足球',
					value: 'fb'
				},
				{
					title: '网球',
					value: 'wb'
				}
			],
		};
	},
};
</script>

其表现形态 效果图 如下：

第二步：绑定change事件，获得选中时对于的value值；

<template>
	<view class="radio-conatiner">
		<!-- demo示例 -->
    <radio-group @change="handleChange">
      <radio v-for="item in list" :value="item.value" :key="item.value">{{ item.title }}</radio>
    </radio-group>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					title: '篮球',
					value: 'bb'
				},
				{
					title: '足球',
					value: 'fb'
				},
				{
					title: '网球',
					value: 'wb'
				}
			],
			value: ''
		};
	},
	methods: {
		handleChange(e) {
			this.value = e.detail.value;
		}
	}
};
</script>

第三步：添加按钮，并为按钮添加点击事件，在点击事件汇总获取选中值；

<!-- demo示例 -->
<radio-group @change="handleChange">
  <radio v-for="item in list" :value="item.value" :key="item.value">{{ item.title }}</radio>
</radio-group>

<button @click="handleClick">获取选中值</button>

<script>
export default {
	data() {
		return {
			list: [
				{
					title: '篮球',
					value: 'bb'
				},
				{
					title: '足球',
					value: 'fb'
				},
				{
					title: '网球',
					value: 'wb'
				}
			],
			value: ''
		};
	},
	methods: {
		handleChange(e) {
			this.value = e.detail.value;
		},
		handleClick() {
			alert(this.value);
		}
	}
};
</script>

其表现形态 效果图 如下：

九. 小结

本文主要分享了uni-app中内置组件radio的一些用法，主要包括 属性如value属性，禁用属性，选中属性等，以及radio提供的默认事件change的使用，最后示例了一个结合v-for指令，button组件完成了一个动态生成radio并获取选中值的示例demo；
我们知道radio同样是图形化界面中的基石之一，它的用法和checkbox几乎完全一致，最大的区别就是单选与复选的功能不同了；

(PS：都已经看到这里了，点个赞，求个关注吧，万分感谢～)