ソースを参照

feat:CheckboxGroup增加全选、反选功能

richard1015 6 年 前
コミット
2d704cdceb

+ 28 - 1
src/packages/checkboxgroup/checkboxgroup.vue

@@ -148,7 +148,34 @@ export default {
 
            
         },
-        
+        toggleAll(checked) {
+            if (checked === false) {
+                this.$emit("input", []);
+                return;
+            }
+            if(checked === true){
+                this.checkBoxData.map(item => {
+                    item.checked = true;
+                });
+            }
+            if (!checked) {
+                this.checkBoxData.map(item => {
+                    item.checked = !item.checked;
+                });
+            }
+
+            let value = [],
+                label = [];
+            let resData = this.checkBoxData.filter(item => {
+                if (item.checked) {
+                value.push(item.value);
+                label.push(item.label);
+                }
+                return item.checked;
+            });
+            this.$emit("input",value);
+            this.$emit("change", value, label, null);
+        }
     }
 }
 </script>

+ 7 - 2
src/packages/checkboxgroup/demo.vue

@@ -3,9 +3,12 @@
         <h4>基本用法(2s后动态更新)</h4>
         <div>
             <nut-cell>
-                <span slot="title"><nut-checkboxgroup  :checkBoxData="data1" v-model="group1"></nut-checkboxgroup></span>
+                <span slot="title"><nut-checkboxgroup ref="checkboxGroup" :checkBoxData="data1" v-model="group1"></nut-checkboxgroup></span>
             </nut-cell>
             <p>{{group1}}</p>
+            <nut-button small @click="checkAll(true)">全选</nut-button>
+            <nut-button small @click="checkAll(false)">取消全选</nut-button>
+            <nut-button small @click="checkAll()">反选</nut-button>
         </div>
 
         <h4>禁用状态</h4>
@@ -132,7 +135,9 @@ export default {
             alert('已选值:['+ val+'],当前选择值:'+ label);
            
         },
-        
+        checkAll(state){
+            this.$refs.checkboxGroup.toggleAll(state);
+        }
     }
 };
 </script>

+ 21 - 3
src/packages/checkboxgroup/doc.md

@@ -3,10 +3,15 @@
 ## 基本用法(2s后动态更新)
 
 ```html
-<nut-checkboxgroup  
-	:checkBoxData="data">
-	v-model="group"
+<nut-checkboxgroup
+    ref="checkboxGroup"
+	:checkBoxData="data"
+	v-model="group">
 </nut-checkboxgroup>
+<p>{{group1}}</p>
+<nut-button small @click="checkAll(true)">全选</nut-button>
+<nut-button small @click="checkAll(false)">取消全选</nut-button>
+<nut-button small @click="checkAll()">反选</nut-button>
 ```
 
 ```javascript
@@ -25,6 +30,11 @@ mounted(){
     setTimeout(() => {
         this.group.push('选项B')
     }, 2000);
+},
+methods:{
+    checkAll(state){
+        this.$refs.checkboxGroup.toggleAll(state);
+    }
 }
 ```
 v-model绑定的数组选项对应data的value值,控制选项是否选中,如代码所示,‘选项A’被勾选。如果group为空那么所有选项未选中。
@@ -224,3 +234,11 @@ methods: {
 |----- | ----- | ----- 
 | change | 值变化时触发 | 当前已选中项的状态(values),当前选中项值(label),event
 
+## CheckboxGroup 方法
+
+#### 通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法
+
+| 方法名 | 说明 | 参数 
+|----- | ----- | ----- 
+| toggleAll | 切换所有复选框的选中状态 | checked?: boolean
+