Radio 单选框

# Radio 单选框

在一组备选项中进行单选

# 基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

苹果

香蕉

西瓜

要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。

<template>
	<tu-radio
		v-model="radio"
		label="1"
		>苹果</tu-radio
	>
	<tu-radio
		v-model="radio"
		label="2"
		>香蕉</tu-radio
	>
	<tu-radio
		v-model="radio"
		label="3"
		>西瓜</tu-radio
	>
</template>

<script>
	export default {
		data() {
			return {
				radio: "1",
			};
		},
	};
</script>

Copy

# 禁用状态

单选框不可用的状态。

禁用

选中且禁用

只要在tu-radio元素中设置disabled属性即可，它接受一个Boolean，true为禁用。

<template>
	<tu-radio
		disabled
		v-model="radio"
		label="禁用"
		>禁用</tu-radio
	>
	<tu-radio
		disabled
		v-model="radio"
		label="选中且禁用"
		>选中且禁用</tu-radio
	>
</template>

<script>
	export default {
		data() {
			return {
				radio: "选中且禁用",
			};
		},
	};
</script>

Copy

# 单选框组

适用于在多个互斥的选项中选择的场景

苹果

香蕉

西瓜

结合tu-radio-group元素和子元素tu-radio可以实现单选组，在tu-radio-group中绑定v-model，在tu-radio中设置好label即可，无需再给每一个tu-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。

<template>
	<tu-radio-group v-model="radio">
		<tu-radio :label="1">苹果</tu-radio>
		<tu-radio :label="2">香蕉</tu-radio>
		<tu-radio :label="3">西瓜</tu-radio>
	</tu-radio-group>
</template>

<script>
	export default {
		data() {
			return {
				radio: 1,
			};
		},
	};
</script>

Copy

# 按钮组样式

按钮样式的多选组合。

超小

苹果

香蕉

西瓜

较小

苹果

香蕉

西瓜

中等

苹果

香蕉

西瓜

较大

苹果

香蕉

西瓜

设置button属性可以渲染为按钮组样式的多选框。此外，还提供了size属性。

<template>
	<div>
		<div style="margin-top: 20px">
			<p>超小</p>
			<tu-radio-group
				v-model="radio1"
				size="mini"
				button
			>
				<tu-radio label="1">苹果</tu-radio>
				<tu-radio label="2">香蕉</tu-radio>
				<tu-radio label="3">西瓜</tu-radio>
			</tu-radio-group>
		</div>
		<div style="margin-top: 20px">
			<p>较小</p>
			<tu-radio-group
				v-model="radio2"
				size="small"
				button
			>
				<tu-radio label="1">苹果</tu-radio>
				<tu-radio label="2">香蕉</tu-radio>
				<tu-radio label="3">西瓜</tu-radio>
			</tu-radio-group>
		</div>
		<div style="margin-top: 20px">
			<p>中等</p>
			<tu-radio-group
				v-model="radio3"
				size="medium"
				button
			>
				<tu-radio label="1">苹果</tu-radio>
				<tu-radio label="2">香蕉</tu-radio>
				<tu-radio
					label="3"
					disabled
					>西瓜</tu-radio
				>
			</tu-radio-group>
		</div>
		<div style="margin-top: 20px">
			<p>较大</p>
			<tu-radio-group
				v-model="radio4"
				size="large"
				button
			>
				<tu-radio label="1">苹果</tu-radio>
				<tu-radio label="2">香蕉</tu-radio>
				<tu-radio label="3">西瓜</tu-radio>
			</tu-radio-group>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				radio1: "1",
				radio2: "1",
				radio3: "1",
				radio4: "1",
			};
		},
	};
</script>

Copy

# 带有边框

超小

苹果

香蕉

西瓜

较小

苹果

香蕉

西瓜

中等

苹果

香蕉

西瓜

较大

苹果

香蕉

西瓜

设置border属性可以渲染为带有边框的单选框，此外，TuView 还提供了size属性。

<template>
	<div style="margin-top: 20px">
		<p>超小</p>
		<tu-radio-group
			v-model="radio1"
			border
			size="mini"
		>
			<tu-radio label="1">苹果</tu-radio>
			<tu-radio label="2">香蕉</tu-radio>
			<tu-radio label="3">西瓜</tu-radio>
		</tu-radio-group>
	</div>
	<div style="margin-top: 20px">
		<p>较小</p>
		<tu-radio-group
			v-model="radio2"
			border
			size="small"
		>
			<tu-radio label="1">苹果</tu-radio>
			<tu-radio label="2">香蕉</tu-radio>
			<tu-radio label="3">西瓜</tu-radio>
		</tu-radio-group>
	</div>
	<div style="margin-top: 20px">
		<p>中等</p>
		<tu-radio-group
			v-model="radio3"
			border
			size="medium"
		>
			<tu-radio label="1">苹果</tu-radio>
			<tu-radio label="2">香蕉</tu-radio>
			<tu-radio label="3">西瓜</tu-radio>
		</tu-radio-group>
	</div>
	<div style="margin-top: 20px">
		<p>较大</p>
		<tu-radio-group
			v-model="radio4"
			border
			size="large"
		>
			<tu-radio label="1">苹果</tu-radio>
			<tu-radio label="2">香蕉</tu-radio>
			<tu-radio label="3">西瓜</tu-radio>
		</tu-radio-group>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				radio1: "1",
				radio2: "1",
				radio3: "1",
				radio4: "1",
			};
		},
	};
</script>

Copy

# Radio Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	—	—
label	Radio 的 value	string / number / boolean	—	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	Radio 的尺寸，仅在 border 为真时有效	string	medium / small / mini	—
name	原生 name 属性	string	—	—

# Radio Events

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的 Radio label 值

# Radio-group Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	—	—
size	单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效	string	medium / small / mini	—
disabled	是否禁用	boolean	—	false

# Radio-group Events

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的 Radio label 值

← Icon 图标 Checkbox 多选框 →