CheckBox 复选框
多选框。
何时使用
- 在一组选项中进行多项选择;
- 单独使用可以表示在两个状态之间切换,可以和提交操作结合。
基本用法
使用 CheckBoxGroup
Input Object Array
Input String Array
Disabled Group
Custom Selected Color
Set showAnimation false
Multi-line Checkbox
可选项目数量的限制
插槽方式
尺寸和边框
Small
Middle
Large
按钮形态
需要把 d-checkbox
替换成 d-checkbox-button
, 数组源可为普通数组、对象数组等。
禁用
默认
自定义填充颜色、文字颜色
checkbox 根据条件终止切换状态
根据条件判断,label 为'条件判断回调禁止选中'的 checkbox 终止切换状态。
checkbox-group 根据条件终止切换状态
选项包含'拦截'字段的 checkbox 无法切换状态。
Checkbox 参数
参数 | 类型 | 默认 | 说明 | 跳转 Demo |
---|---|---|---|---|
name | string | -- | 可选,表单域名,input 原生 name 属性 | 基本用法 |
label | string | -- | 可选,显示标签 | 基本用法 |
value | string|number | -- | 可选,选中状态的值(只有在 checkbox-group 或者绑定对象为 array 时有效) | 使用 CheckBoxGroup |
half-checked | boolean | false | 可选,半选状态 | 基本用法 |
is-show-title | boolean | true | 可选,是否显示 title 提示, 默认显示参数 label 的值 | 基本用法 |
title | string | -- | 可选,显示自定义 title 提示内容 | 基本用法 |
color | string | -- | 可选,复选框颜色 | 基本用法 |
show-animation | boolean | true | 可选,控制是否显示动画 | 基本用法 |
disabled | boolean | false | 可选,是否禁用 | 基本用法 |
before-change | Function|Promise<boolean> | -- | 可选,checkbox 切换前的回调函数, 返回 boolean 类型,返回 false 可以阻止 checkbox 切换 | 基本用法 |
size | ICheckboxSize | md | 可选, checkbox 尺寸,只有在 border 属性存在时生效 | 尺寸 |
border | boolean | false | 可选, 是否有边框 | 边框 |
show-glow-style | boolean | true | 可选,是否显示悬浮发光效果 |
Checkbox 事件
事件 | 说明 | 跳转 Demo |
---|---|---|
change | 复选框的值改变时发出的事件,值是当前状态 | 基本用法 |
CheckboxGroup 参数
参数 | 类型 | 默认 | 说明 | 跳转 Demo |
---|---|---|---|---|
name | string | -- | 可选,表单域名,input 原生 name 属性 | 使用 CheckBoxGroup |
direction | 'row' | 'column' | 'column' | 可选,显示方向 | 使用 CheckBoxGroup |
item-width | number | -- | 可选,表示每一项 checkbox 的宽度(px) | 使用 CheckBoxGroup |
options | array | [] | 可选,复选框选项数组 | 使用 CheckBoxGroup |
half-checked | boolean | false | 可选,半选状态 | 使用 CheckBoxGroup |
is-show-title | boolean | true | 可选,是否显示 title 提示, 默认显示参数 label 的值 | 使用 CheckBoxGroup |
color | string | -- | 可选,复选框颜色 | 使用 CheckBoxGroup |
show-animation | boolean | true | 可选,控制是否显示动画,按钮形态不可用 | 使用 CheckBoxGroup |
disabled | boolean | false | 可选,是否禁用 | 使用 CheckBoxGroup |
max | number | -- | 可选,可被勾选的 checkbox 的最大数量 | 使用 CheckBoxGroup |
before-change | Function |Promise<boolean> | -- | 可选,checkbox 切换前的回调函数, 返回 false 可以阻止 checkbox 切换 | 使用 CheckBoxGroup |
size | ICheckboxSize | md | 可选, checkbox 尺寸,只有在 border 属性存在时生效 | 尺寸 |
border | boolean | false | 可选, 是否有边框 | 边框 |
text-color | string | -- | 可选, 按钮被选中的字体样式,只存在于按钮形态中 | 按钮形态 |
CheckboxGroup 事件
事件 | 说明 | 跳转 Demo |
---|---|---|
change | checkbox 值改变事件 | 使用 change 事件 |
CheckboxButton 参数
参数 | 类型 | 默认 | 说明 | 跳转 Demo |
---|---|---|---|---|
name | string | -- | 可选,表单域名,input 原生 name 属性 | 按钮形态 |
label | string | -- | 可选,显示标签 | 按钮形态 |
value | string|number | -- | 可选,选中状态的值(只有在 checkbox-group 或者绑定对象为 array 时有效) | 按钮形态 |
is-show-title | boolean | true | 可选,是否显示 title 提示, 默认显示参数 label 的值 | 按钮形态 |
title | string | -- | 可选,显示自定义 title 提示内容 | 按钮形态 |
disabled | boolean | false | 可选,是否禁用 | 按钮形态 |
before-change | Function|Promise<boolean> | -- | 可选,checkbox 切换前的回调函数, 返回 boolean 类型,返回 false 可以阻止 checkbox 切换 | 按钮形态 |
size | ICheckboxSize | md | 可选, checkbox 尺寸 | 按钮形态 |
Checkbox 类型定义
ICheckboxSize
type ICheckboxSize = 'lg' | 'md' | 'sm';