alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 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
docs/demos/views/checkbox.vue
+9 -10
View File
@@ -32,7 +32,7 @@
</demo-block>
<demo-block :title="$t('title5')">
<van-checkbox-group v-model="result" :max="max">
<van-checkbox-group v-model="result2" :max="max">
<van-cell-group>
<van-cell v-for="(item, index) in list" :key="index">
<van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
@@ -56,7 +56,7 @@ export default {
checkbox: 'Checkbox',
title3: 'Checkbox Group',
title4: 'Inside a Cell',
title5: 'Configure the maximum amount of checked options'
title5: 'Maximum amount of checked options'
}
},
@@ -70,6 +70,7 @@ export default {
'c'
],
result: ['a', 'b'],
result2: [],
max: 2
};
}
@@ -85,15 +86,13 @@ export default {
.van-cell {
.van-checkbox {
margin: 0;
}
display: flex;
flex-direction: row-reverse;
.van-checkbox__input {
float: right;
position: static;
}
span {
margin: 0;
&__label {
margin: 0;
flex: 1;
}
}
}
}
docs/markdown/en-US/checkbox.md
+17 -26
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
docs/markdown/zh-CN/checkbox.md
+16 -29
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
| 参数 | 说明 | 类型 | 默认值 | 可选值 |