diff --git a/docs/demos/views/checkbox.vue b/docs/demos/views/checkbox.vue
index 0365eda15..77363778b 100644
--- a/docs/demos/views/checkbox.vue
+++ b/docs/demos/views/checkbox.vue
@@ -30,6 +30,16 @@
+
+
+
+
+
+ {{ $t('checkbox') }} {{ item }}
+
+
+
+
@@ -39,12 +49,14 @@ export default {
'zh-CN': {
checkbox: '复选框',
title3: 'Checkbox 组',
- title4: '与 Cell 组件一起使用'
+ title4: '与 Cell 组件一起使用',
+ title5: '设置最大可选数',
},
'en-US': {
checkbox: 'Checkbox',
title3: 'Checkbox Group',
- title4: 'Inside a Cell'
+ title4: 'Inside a Cell',
+ title5: 'Configure the maximum amount of checked options'
}
},
@@ -57,7 +69,8 @@ export default {
'b',
'c'
],
- result: ['a', 'b']
+ result: ['a', 'b'],
+ max: 2
};
}
};
diff --git a/docs/markdown/en-US/checkbox.md b/docs/markdown/en-US/checkbox.md
index 9cb5f436b..4ae5b3621 100644
--- a/docs/markdown/en-US/checkbox.md
+++ b/docs/markdown/en-US/checkbox.md
@@ -69,6 +69,30 @@ export default {
```
+#### Configure the maximum amount of checked options
+
+```html
+
+
+
+ Checkbox {{ item }}
+
+
+
+```
+
+```
+export default {
+ data() {
+ return {
+ list: ['a', 'b', 'c'],
+ result: ['a', 'b'],
+ max: 2
+ };
+ }
+};
+```
+
### Checkbox API
| Attribute | Description | Type | Default | Accepted Values |
@@ -82,6 +106,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) | - |
### Checkbox Event
diff --git a/docs/markdown/zh-CN/checkbox.md b/docs/markdown/zh-CN/checkbox.md
index 3a6fb9d52..add620c02 100644
--- a/docs/markdown/zh-CN/checkbox.md
+++ b/docs/markdown/zh-CN/checkbox.md
@@ -73,6 +73,33 @@ export default {
```
+#### 设置最大可选数
+
+此时你需要引入`CellGroup`组件,`Cell`组件非必须
+
+```html
+
+
+
+ 复选框 {{ item }}
+
+
+
+```
+
+```
+export default {
+ data() {
+ return {
+ list: ['a', 'b', 'c'],
+ result: ['a', 'b'],
+ max: 2
+ };
+ }
+};
+```
+
+
### Checkbox API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
@@ -86,6 +113,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用所有单选框 | `Boolean` | `false` | - |
+| max | 设置最大可选数 | `Number` | `0`(无限制) | - |
### Checkbox Event
diff --git a/packages/checkbox-group/index.vue b/packages/checkbox-group/index.vue
index f544f2774..9c00e3d78 100644
--- a/packages/checkbox-group/index.vue
+++ b/packages/checkbox-group/index.vue
@@ -12,7 +12,11 @@ export default create({
props: {
value: {},
- disabled: Boolean
+ disabled: Boolean,
+ max: {
+ default: 0,
+ type: Number
+ }
},
watch: {
diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index cc4730d8f..afb85de2d 100644
--- a/packages/checkbox/index.vue
+++ b/packages/checkbox/index.vue
@@ -3,7 +3,7 @@
class="van-checkbox"
:class="[
`van-checkbox--${shape}`,
- { 'van-checkbox--disabled': isDisabled }
+ { 'van-checkbox--disabled': isDisabled || isLimit }
]"
>
@@ -90,7 +90,12 @@ export default create({
},
isDisabled() {
- return (this.isGroup && this.parentGroup && this.parentGroup.disabled) || this.disabled;
+ return (this.isGroup && this.parentGroup && this.parentGroup.disabled) || this.disabled ||
+ (this.isGroup && this.parentGroup && this.parentGroup.max > 0 && this.parentGroup.max <= this.parentGroup.value.length && !this.isChecked);
+ },
+
+ isLimit() {
+ return this.isGroup && this.parentGroup && this.parentGroup.max > 0 && this.parentGroup.max <= this.parentGroup.value.length;
}
},
diff --git a/test/unit/components/checkbox.vue b/test/unit/components/checkbox.vue
index 0b824248a..1b8cfd1c4 100644
--- a/test/unit/components/checkbox.vue
+++ b/test/unit/components/checkbox.vue
@@ -1,5 +1,5 @@
-
+
复选框{{item}}
@@ -22,7 +22,8 @@ export default {
'c',
'd'
],
- result: ['a', 'b']
+ result: ['a', 'b'],
+ max: 0
};
}
};
diff --git a/test/unit/specs/checkbox.spec.js b/test/unit/specs/checkbox.spec.js
index 110032883..5e4df1c11 100644
--- a/test/unit/specs/checkbox.spec.js
+++ b/test/unit/specs/checkbox.spec.js
@@ -67,6 +67,23 @@ describe('CheckboxGroup', () => {
});
});
+ it('click on unchecked item and checked options num beyond max', (done) => {
+ wrapper = mount(CheckboxTestComponent);
+
+ wrapper.setData({
+ 'max': 2
+ });
+
+ const lastCheckboxLabel = wrapper.find('.van-checkbox')[3].find('.van-checkbox__label')[0];
+ lastCheckboxLabel.trigger('click');
+
+ wrapper.update();
+ wrapper.vm.$nextTick(() => {
+ expect(wrapper.vm.result.indexOf('d')).to.equal(-1);
+ done();
+ });
+ });
+
it('click on disabled item', (done) => {
wrapper = mount(CheckboxTestComponent);