Radio 单选

在一组备选项中进行备选项

基础用法

可以使用 label 或者 <slot/> 两种方式定义其中内容。

查看代码

<template>
	<demo-container>
		<gov-radio v-model="value" value="1" label="备选项" />
		<gov-radio v-model="value" value="2" label="备选项" />
		<gov-radio v-model="value" value="3">备选项</gov-radio>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("1");
</script>

单选按钮组

使用 RadioGroup 可以统一设置 disabled 、size、v-model 等。

查看代码

<template>
	<demo-container>
		<gov-radio-group v-model="value">
			<gov-radio value="1">备选项</gov-radio>
			<gov-radio value="2">备选项</gov-radio>
			<gov-radio value="3">备选项</gov-radio>
		</gov-radio-group>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("1");
</script>

禁用状态

备选项框不可用的状态。

查看代码

<template>
	<demo-container>
		<gov-radio disabled v-model="value" value="1">禁用状态</gov-radio>
		<gov-radio disabled v-model="value" value="2">禁用状态</gov-radio>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("1");
</script>

边框模式

设置 border 后可设置 size 显示不同尺寸。

查看代码

<template>
	<demo-container>
		<gov-radio v-model="value" value="1" border size="large">
			备选项
		</gov-radio>
		<gov-radio v-model="value" value="2" border> 备选项 </gov-radio>
		<gov-radio v-model="value" value="3" border size="small">
			备选项
		</gov-radio>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("1");
</script>

按钮样式

按钮样式的单选组合。

查看代码

<template>
	<demo-container>
		<gov-radio-group button v-model="value" size="large">
			<gov-radio value="1">备选项</gov-radio>
			<gov-radio value="2">备选项</gov-radio>
			<gov-radio value="3">备选项</gov-radio>
		</gov-radio-group>
		<br />
		<br />
		<gov-radio-group button v-model="value">
			<gov-radio value="1">备选项</gov-radio>
			<gov-radio value="2" disabled>备选项</gov-radio>
			<gov-radio value="3">备选项</gov-radio>
		</gov-radio-group>
		<br />
		<br />
		<gov-radio-group button v-model="value" size="small" disabled>
			<gov-radio value="1">备选项</gov-radio>
			<gov-radio value="2">备选项</gov-radio>
			<gov-radio value="3">备选项</gov-radio>
		</gov-radio-group>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("1");
</script>

Radio Attributes

属性	说明	类型	可选值	默认值
model-value / v-model	绑定值	string / number / boolean	—	—
value	单选框的值	string / number / boolean	—	—
label	内容文本	string / number	—	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	Radio 的尺寸，仅在 border 为真时有效	string	large / default / small	—
name	原生 name 属性	string	—	—
triggerForm	是否触发表单验证	Boolean	true, false	true

Radio Events

事件名	说明	回调参数
change	绑定值变化时触发的事件	value
blur	失去焦点时触发	—
focus	获得焦点时触发	—

Radio Slots

插槽名	说明
default	自定义标签内容，可以放置任何自定义的内容，例如文本或 HTML 结构。

Radio-group Attributes

属性	说明	类型	可选值	默认值
model-value / v-model	绑定值	string / number / boolean	—	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	Radio 的尺寸，仅在 border 为真时有效	string	large / default / small	—
triggerForm	是否触发表单验证	Boolean	true, false	true

Radio-group Events

事件名	说明	回调参数
change	绑定值变化时触发的事件	value
blur	失去焦点时触发	—
focus	获得焦点时触发	—

Radio-group Slots

插槽名	说明
default	用于放置复选框 GovRadio 组件实例。