ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-12-24 02:02:09 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

[Improvement] Checkbox: remove unnecessary DOM (#636)

Browse Source
This commit is contained in:
neverland
2018-02-12 10:35:20 +08:00
committed by GitHub
parent 24a50034b6
commit 9673da4131
6 changed files with 93 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
docs/markdown/en-US/checkbox.md
View File

@@ -38,7 +38,7 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an
<van-checkbox-group v-model="result">
<van-checkbox
v-for="(item, index) in list"
:key="index"
:key="item"
:name="item"
>
Checkbox {{ item }}
@@ -57,41 +57,32 @@ export default {
};
```
#### Maximum amount of checked options
```html
<van-checkbox-group v-model="result" :max="2">
<van-checkbox
v-for="(item, index) in list"
:name="item"
:key="item"
>
Checkbox {{ item }}
</van-checkbox>
</van-checkbox-group>
```
#### Inside a Cell
```html
<van-checkbox-group v-model="result">
<van-cell-group>
<van-cell v-for="(item, index) in list" :key="index">
<van-cell v-for="(item, index) in list" :key="item">
<van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
</van-cell>
</van-cell-group>
</van-checkbox-group>
```
#### Configure the maximum amount of checked options
```html
<van-checkbox-group v-model="result" :max="max">
<van-cell-group>
<van-cell v-for="(item, index) in list" :key="index">
<van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
</van-cell>
</van-cell-group>
</van-checkbox-group>
```
```
export default {
data() {
return {
list: ['a', 'b', 'c'],
result: ['a', 'b'],
max: 2
};
}
};
```
### Checkbox API
@@ -106,7 +97,7 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| disabled | Disable all checkboxes | `Boolean` | `false` | - |
| max | the maximum amount of checked options | `Number` | `0`(Unlimited) | - |
| max | Maximum amount of checked options | `Number` | `0`(Unlimited) | - |
### Checkbox Event

45
docs/markdown/zh-CN/checkbox.md
View File

@@ -40,7 +40,7 @@ export default {
<van-checkbox-group v-model="result">
<van-checkbox
v-for="(item, index) in list"
:key="index"
:key="item"
:name="item"
>
复选框 {{ item }}
@@ -59,6 +59,20 @@ export default {
};
```
#### 设置最大可选数
```html
<van-checkbox-group v-model="result" :max="2">
<van-checkbox
v-for="(item, index) in list"
:key="item"
:name="item"
>
复选框 {{ item }}
</van-checkbox>
</van-checkbox-group>
```
#### 与 Cell 组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件
@@ -66,40 +80,13 @@ export default {
```html
<van-checkbox-group v-model="result">
<van-cell-group>
<van-cell v-for="(item, index) in list" :key="index">
<van-cell v-for="(item, index) in list" :key="item">
<van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
</van-cell>
</van-cell-group>
</van-checkbox-group>
```
#### 设置最大可选数
此时你需要引入`CellGroup`组件，`Cell`组件非必须
```html
<van-checkbox-group v-model="result" :max="max">
<van-cell-group>
<van-cell v-for="(item, index) in list" :key="index">
<van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
</van-cell>
</van-cell-group>
</van-checkbox-group>
```
```
export default {
data() {
return {
list: ['a', 'b', 'c'],
result: ['a', 'b'],
max: 2
};
}
};
```
### Checkbox API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |