Radio 单选框

介绍

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

基础用法

通过 v-model 绑定选中的值，可设置 name 自定义选项值。

<vd-radio-group v-model="checked">
  <vd-radio name="1">单选框 1</vd-radio>
  <vd-radio name="2">单选框 2</vd-radio>
</vd-radio-group>

const checked = ref('1');

预设形状

通过 shape 设置单选框的形状。

<vd-radio-group v-model="checked">
  <vd-radio label="圆形单选" name="1" />
  <vd-radio label="方形单选" name="2" shape="square" />
  <vd-radio label="球形单选" name="3" shape="circle" />
</vd-radio-group>

const checked = ref('1');

纵向排列

通过 vertical 设置单选框纵向排列。

<vd-radio-group v-model="checked" vertical>
  <vd-radio label="单选框 1" name="1" />
  <vd-radio label="单选框 2" name="2" />
</vd-radio-group>

const checked = ref('1');

禁用状态

通过 disabled 设置单选框禁用状态。

<vd-radio-group v-model="checked">
  <vd-radio label="单选框 1" name="1" />
  <vd-radio label="单选框 2" name="2" disabled />
</vd-radio-group>

const checked = ref('1');

卡片主题

通过 theme 设置单选框主题样式。

<vd-radio-group v-model="checked" theme="card">
  <vd-radio label="单选框 1" name="1" />
  <vd-radio label="单选框 2" name="2" />
</vd-radio-group>

const checked = ref('1');

标签位置

通过 label-position 设置单选框标签的位置。

<vd-radio-group
  v-model="checked"
  theme="card"
  label-position="left"
>
  <vd-radio label="单选框 1" name="1" />
  <vd-radio label="单选框 2" name="2" />
</vd-radio-group>

const checked = ref('1');

自定义图标

通过 icon 设置单选框的图标。

<vd-radio-group v-model="checked" theme="card">
  <vd-radio label="单选框1" name="1" icon="star-fill" />
  <vd-radio label="单选框2" name="2" icon="love-fill" />
</vd-radio-group>

const checked = ref('1');

搭配弹出层使用

可搭配 Popover 组件使用，实现弹出层选择组。

<vd-popup
  v-model="picker.show"
  position="bottom"
  title="搭配弹出层使用"
  round
  closeable
>
  <vd-radio-group v-model="picker.value" theme="card" label-position="left">
    <vd-radio v-for="num in 8" :key="num" :label="`单选框${num}`" :name="num" />
  </vd-radio-group>
</vd-popup>

const picker = reactive({
  show: false,
  value: '1',
});

API

RadioGroup Props

参数	说明	类型	默认值
v-model	选中项标识名称	string | number	-
theme	主题	default card	default
shape	形状	round square circle	round
icon	图标	IconsName	-
label-position	标签位置	left right	right
label-disabled	标签是否禁用	boolean	false
vertical	是否纵向排列	boolean	false
disabled	是否禁用	boolean	false

Radio Props

参数	说明	类型	默认值
name	标识名称	string | number	-
shape	形状	round square circle	round
icon	图标	IconsName	-
label	标签	string	-
label-position	标签位置	left right	right
label-disabled	标签是否禁用	boolean	false
disabled	是否禁用	boolean	false

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

RadioGroup Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	选中改变时触发	string | number
updated	状态改变时触发	RadioGroupCheckedData

Radio Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	选中改变时触发	boolean

RadioGroup Slots

名称	说明
default	自定义内容

Radio Slots

名称	说明
icon	图标
label	标签