Fz Design

Appearance

Checkbox 多选框 ​

多选框

基本用法 ​

绑定单个复选框，配合 v-model 绑定一个 boolean 值。

尺寸 ​

可以通过设置 size 属性，来设置不同的大小，可设置的值有：small、default、large。

多选框组 ​

需要使用 v-model 绑定一个值。

TIP

disabled 属性可以禁用指定选项，作用在 fz-checkbox-group 组件上可以全部禁用，作用在 fz-checkbox 上可以指定禁用某一项。

按钮组尺寸 ​

size 属性可以配置不同的尺寸。

背景色效果 ​

background 属性可以配置带有背景色的效果。

垂直排列 ​

vertical 属性可以垂直排列。

Checkbox API ​

API ​

Attributes ​

参数说明类型默认值
model-value绑定值CheckboxModelValuenull
size尺寸CheckboxSize-
name原生 namestring-
label选框对应的值CheckboxModelValue-
disabled是否禁用boolean-

Slots ​

名称说明
default展示的内容，默认为 label

Events ​

事件名称说明类型
change改变时触发(val: CheckboxModelValue) => void

Interface ​

组件导出以下类型定义：

ts
import type {
  CheckboxInstance,
  CheckboxProps,
  CheckboxSize,
  CheckboxModelValue,
  CheckboxLabel
} from 'fighting-design'
import type {
  CheckboxInstance,
  CheckboxProps,
  CheckboxSize,
  CheckboxModelValue,
  CheckboxLabel
} from 'fighting-design'

CheckboxGroup API ​

API ​

Attributes ​

参数说明类型默认值
model-value绑定值CheckboxLabel[]null
size尺寸CheckboxSize-
vertical是否纵向排列boolean-
background背景状态boolean-
disabled是否禁用boolean-
columnGap横向排列的间距string|number-
rowGap纵向排列的间距string|number-

Slots ​

名称说明
defaultCheckbox 组件

Events ​

事件名称说明类型
change改变时触发(val: CheckboxLabel[]) => void

Interface ​

组件导出以下类型定义：

ts
import type { CheckboxGroupInstance, CheckboxGroupProps } from 'fighting-design'
import type { CheckboxGroupInstance, CheckboxGroupProps } from 'fighting-design'