Checkbox 复选框
对一组选项进行多选 API文档 组件问题反馈和讨论使用方法
- 在一组可选项中进行多项选择时。
- 单独使用可以表示两种状态之间的切换。
- 复选按钮有选中态、未选中态、禁用态，放置在可选信息的左侧。
基础样式 #
最基础简单的复选框样式,只需在input标签上加上class为 nv-checkbox 即可实现,标签添加 checked 即为选中<code>
禁选样式 #
复选框不可用状态：不可选、不可更改,标签上添加 disabled 代表复选框禁用<code>
复选框组合样式 #
在一个复选框组合内有多个勾选项，标签上添加 data-label="checkbox1" 属性代表复选框显示文字<code>
全选#
所有选项全部勾选 全选项与子项必须name相同.全选项有属性data-all="true"<code>
自定义事件#
checkbox内置了一个名为nvonchange的事件，只需要调用该事件就可以动态配置checkbox的选中和禁用状态（主要用于渲染完成之后动态改变checkbox的选中和禁用状态）<code>
API #
自定义属性|
属性
|
类型（是否必要）
|
描述
|
|---|
|
checked
|
string (选填)
|
checked 选中 eg: checked=""
|
|
disabled
|
string (选填)
|
disabled 禁用 eg: disabled=""
|
|
data-all
|
Boolean (选填)
|
全选属性 eg: data-all="true" 编辑全选属性得复选框会操作name相同得复选框
|
|
data-label
|
string (选填)
|
leabel内文字,可为空 eg: data-label="中国"
|
onnvchange配置项 #
onnvchange可传配置项说明|
属性
|
类型
|
描述
|
|---|
|
checked
|
Boolean
|
"选中" eg: {checked: true}
|
|
disabled
|
Boolean
|
"禁用" eg: {disabled: true}
|
|
value
|
String/Number
|
"值" eg: {value: 0}
|
|
label
|
String/Number
|
"显示文字" eg: {label: 0}
|
|
checkedAll
|
Boolean
|
"全选" eg: {checkedAll: true}该参数会覆盖checked参数
相同name的checkbox都会被选中
|
|
beforeFn
|
Function
|
回调函数,初始化开始时执行.this指向为当前操作input
|
|
afterFn
|
Function
|
回调函数,初始化结束时执行.this指向为当前操作input
|