From 74e5f493b0649dba68c806b472838dd5e29e0f7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Sun, 15 Sep 2019 10:42:36 +0800
Subject: [PATCH] Update checkbox.vue

---
 examples/routers/checkbox.vue | 45 ++++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/examples/routers/checkbox.vue b/examples/routers/checkbox.vue
index 1bdec4eb..27188d4c 100644
--- a/examples/routers/checkbox.vue
+++ b/examples/routers/checkbox.vue
@@ -44,6 +44,18 @@
             <Checkbox label="苹果"></Checkbox>
             <Checkbox label="西瓜"></Checkbox>
         </CheckboxGroup>
+        <Divider></Divider>
+        <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
+            <Checkbox
+                    :indeterminate="indeterminate"
+                    :value="checkAll"
+                    @click.prevent.native="handleCheckAll">全选</Checkbox>
+        </div>
+        <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
+            <Checkbox label="香蕉"></Checkbox>
+            <Checkbox label="苹果"></Checkbox>
+            <Checkbox label="西瓜"></Checkbox>
+        </CheckboxGroup>
     </div>
 </template>
 <script>
@@ -54,9 +66,40 @@
                 fruit: ['苹果'],
                 tags: [],
                 testValue1: null,
-                testValue2: null
+                testValue2: null,
+                indeterminate: true,
+                checkAll: false,
+                checkAllGroup: ['香蕉', '西瓜']
             };
         },
+        methods: {
+            handleCheckAll () {
+                if (this.indeterminate) {
+                    this.checkAll = false;
+                } else {
+                    this.checkAll = !this.checkAll;
+                }
+                this.indeterminate = false;
+
+                if (this.checkAll) {
+                    this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
+                } else {
+                    this.checkAllGroup = [];
+                }
+            },
+            checkAllGroupChange (data) {
+                if (data.length === 3) {
+                    this.indeterminate = false;
+                    this.checkAll = true;
+                } else if (data.length > 0) {
+                    this.indeterminate = true;
+                    this.checkAll = false;
+                } else {
+                    this.indeterminate = false;
+                    this.checkAll = false;
+                }
+            }
+        },
         mounted () {
             setTimeout(() => {
                 this.tags = [