Radio 单选框

用于在一组备选项中进行单选。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 v-model 绑定当前选中的值，name 为单选框的标识。

<zq-radio v-model="value" name="1" label="选项一" />
<zq-radio v-model="value" name="2" label="选项二" />

const value = ref('1')

禁用状态

通过 disabled 属性禁用单选框。

<zq-radio v-model="value" name="1" label="选项一" />
<zq-radio v-model="value" name="2" label="选项二" disabled />

自定义颜色

通过 checked-color 属性自定义选中时的颜色。

<zq-radio v-model="value" name="1" checked-color="#07c160" label="自定义颜色" />

标签位置

通过 label-position 属性设置标签位置。

<zq-radio v-model="value" name="1" label-position="left" label="左侧标签" />

通过插槽自定义标签

<zq-radio v-model="value" name="1">
  <text>自定义内容</text>
</zq-radio>

API

Props

参数	说明	类型	默认值
v-model	当前选中的值	string | number	''
name	单选框标识（必填）	string | number	-
label	标签文字	string	''
disabled	是否禁用	boolean	false
checked-color	选中时的颜色	string	''
label-position	标签位置	'left' | 'right'	'right'

Events

事件名	说明	回调参数
update:modelValue	选中状态变化时触发	value: string | number
change	选中状态变化时触发	value: string | number

Slots

名称	说明
default	自定义标签内容，优先级高于 label 属性

主题定制

变量名	说明
--color-primary	选中时默认颜色
--color-border	未选中时边框色
--color-text-primary	标签文字颜色
--color-text-disabled	禁用时标签颜色