Checkbox 复选框

介绍

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

基础用法

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

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

const checked = ref(['1']);

预设形状

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

<vd-checkbox-group v-model="checked">
  <vd-checkbox label="方形复选框" name="1" />
  <vd-checkbox label="圆形复选框" name="2" shape="round" />
</vd-checkbox-group>

const checked = ref(['1']);

纵向排列

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

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

const checked = ref(['1']);

禁用状态

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

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

const checked = ref(['1']);

卡片主题

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

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

const checked = ref(['1']);

标签位置

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

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

const checked = ref(['1']);

自定义图标

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

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

const checked = ref(['1']);

搭配弹出层使用

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

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

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

API

CheckboxGroup Props

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

Checkbox Props

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

代替原始 Props

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

CheckboxGroup Events

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

Checkbox Events

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

CheckboxGroup Slots

名称	说明
default	自定义内容

Checkbox Slots

名称	说明
icon	图标
label	标签