[Improvement] Checkbox: with cell (#1430)

This commit is contained in:
neverland
2018-07-06 20:57:40 +08:00
committed by GitHub
parent 33cd446581
commit a5628c2dd2
6 changed files with 83 additions and 22 deletions
+27 -3
View File
@@ -101,18 +101,34 @@ export default {
#### 与 Cell 组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件
此时你需要再引入`Cell`和`CellGroup`组件,并通过 checkbox 的 toggle 方法手动触发切换
```html
<van-checkbox-group v-model="result">
<van-cell-group>
<van-cell v-for="item in list" :title="`复选框 ${item}`" :key="item">
<van-checkbox :name="item" />
<van-cell
v-for="item in list"
clickable
:key="item"
:title="`复选框 ${item}`"
@click="toggle(index)"
>
<van-checkbox :name="item" ref="checkboxes" />
</van-cell>
</van-cell-group>
</van-checkbox-group>
```
```js
export default {
methods: {
toggle(index) {
this.$refs.checkboxes[index].toggle();
}
}
}
```
### Checkbox API
| 参数 | 说明 | 类型 | 默认值 |
@@ -150,3 +166,11 @@ export default {
|-----------|-----------|-----------|
| default | 自定义文本 | - |
| icon | 自定义图标 | checked: 是否为选中状态 |
### Checkbox 方法
通过 ref 可以获取到 checkbox 实例并调用实例方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| toggle | - | - | 切换选中状态 |