Prechádzať zdrojové kódy

Add minimum/maximum prop to checkbox group

Mathieu DARTIGUES 8 rokov pred
rodič
commit
3cefe969be

+ 3 - 1
packages/checkbox/src/checkbox-group.vue

@@ -9,7 +9,9 @@
     mixins: [Emitter],
 
     props: {
-      value: {}
+      value: {},
+      minimum: String,
+      maximum: String
     },
 
     watch: {

+ 11 - 0
packages/checkbox/src/checkbox.vue

@@ -66,7 +66,18 @@
 
         set(val) {
           if (this.isGroup) {
+            let isLimitExceeded = false;
+            (this._checkboxGroup.minimum !== undefined &&
+              val.length < this._checkboxGroup.minimum &&
+              (isLimitExceeded = true));
+
+            (this._checkboxGroup.maximum !== undefined &&
+              val.length > this._checkboxGroup.maximum &&
+              (isLimitExceeded = true));
+
+            isLimitExceeded === false &&
             this.dispatch('ElCheckboxGroup', 'input', [val]);
+
           } else if (this.value !== undefined) {
             this.$emit('input', val);
           } else {

+ 39 - 0
test/unit/specs/checkbox.spec.js

@@ -68,6 +68,45 @@ describe('Checkbox', () => {
     });
   });
 
+  it('checkbox group minimum and maximum', done => {
+    vm = createVue({
+      template: `
+        <el-checkbox-group 
+          v-model="checkList" 
+          minimum="1" 
+          maximum="2"
+        >
+          <el-checkbox label="a" ref="a"></el-checkbox>
+          <el-checkbox label="b" ref="b"></el-checkbox>
+          <el-checkbox label="c" ref="c"></el-checkbox>
+          <el-checkbox label="d" ref="d"></el-checkbox>
+        </el-checkbox-group>
+      `,
+      data() {
+        return {
+          checkList: ['a'],
+          lastEvent: null
+        };
+      }
+    }, true);
+    expect(vm.checkList.length === 1).to.be.true;
+    vm.$refs.a.$el.click();
+    vm.$nextTick(() => {
+      expect(vm.checkList.indexOf('a') !== -1).to.be.true;
+      vm.$refs.b.$el.click();
+      vm.$nextTick(() => {
+        expect(vm.checkList.indexOf('a') !== -1).to.be.true;
+        expect(vm.checkList.indexOf('b') !== -1).to.be.true;
+        vm.$refs.c.$el.click();
+        vm.$nextTick(() => {
+          expect(vm.checkList.indexOf('c') !== -1).to.be.false;
+          expect(vm.checkList.indexOf('d') !== -1).to.be.false;
+          done();
+        });
+      });
+    });
+  });
+
   it('nested group', done => {
     vm = createVue({
       template: `