## Checkbox 复选框 ### 使用指南 ``` javascript import { Checkbox } from 'vant'; Vue.component(Checkbox.name, Checkbox); ``` ### 代码演示 #### 基础用法 通过`v-model`绑定值即可。当`Checkbox`选中时,绑定的值即为`true`,否则为`false`。当单个`Checkbox`使用时,更建议使用`Switch`组件。 :::demo 基础用法 ```html
复选框1
``` ::: #### 禁用状态 设置`disabled`属性即可,此时`Checkbox`不能点击。 :::demo 禁用状态 ```html
复选框2
``` ::: #### Checkbox组 需要与`van-checkbox-group`一起使用,值通过`v-model`绑定在`van-checkbox-group`上,例如下面的`result`,此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。 :::demo Checkbox组 ```html
复选框{{item}}
``` ::: #### 禁用Checkbox组 禁用`van-checkbox-group`,此时整个组都不可点击。 :::demo 禁用Checkbox组 ```html
复选框{{item}}
``` ::: #### 与Cell组件一起使用 此时你需要再引入`Cell`和`CellGroup`组件。 :::demo 与Cell组件一起使用 ```html 复选框{{item}} ``` ::: ### Checkbox API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | disabled | 是否禁用单选框 | `boolean` | `false` | | | name | 根据这个来判断radio是否选中 | `boolean` | `false` | | ### CheckboxGroup API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | disabled | 是否禁用单选框 | `boolean` | `false` | | ### CheckboxGroup Event | 事件名称 | 说明 | 回调参数 | |-----------|-----------|-----------| | change | 当绑定值变化时触发的事件 | 当前组件的值 |