Fighting Design

Appearance

On this page

Checkbox 复选框 ​

你可以有多个选择

基础使用 ​

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

开启

复选组 ​

多个选项可使用 f-checkbox-group 复选框组

开启

禁用选项 ​

直接添加disabled 属性即可，当在 f-checkbox-group 组件上使用 disabled 属性时，会将其内部组件全部禁用掉



开启

背景色效果 ​

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







开启

CheckboxGroup Attributes ​

参数说明类型可选值默认值
modelValue / v-model绑定值string[]————
disabled是否禁用boolean——false
border是否显示边框boolean——false
size尺寸FightingSizelarge middle small minimiddle
vertical是否纵向排列boolean——false
column-gap横向排列的间距string / number————
row-gap纵向排列的间距string / number————
on-change绑定值变化时触发的回调CheckboxGroupChange————

Checkbox Attributes ​

参数说明类型可选值默认值
modelValue / v-model绑定值CheckboxModelValue————
disabled是否禁用boolean——false
label单选框对应的值CheckboxLabel————
on-change绑定值变化时触发的回调CheckboxChange————

Interface ​

组件导出以下类型定义：

ts
import type {
  CheckboxInstance,
  CheckboxProps,
  CheckboxModelValue,
  CheckboxLabel,
  CheckboxChange,
  CheckboxGroupInstance,
  CheckboxGroupProps,
  CheckboxGroupChange
} from 'fighting-design'

CheckboxModelValue ​

ts
type CheckboxModelValue = boolean | 'true' | 'false'

CheckboxLabel ​

ts
type CheckboxLabel = string | number | boolean

CheckboxChange ​

ts
type CheckboxChange = (val: CheckboxLabelType) => void

CheckboxGroupChange ​

ts
type CheckboxGroupChange = (val: string[]) => void

Contributors ​