support Collapse

support Collapse

src/components/collapse/collapse.vue

@@ -12,16 +12,21 @@
                 type: Boolean,
                 default: false
             },
-            activeKey: {
+            value: {
                 type: [Array, String]
             }
         },
+        data () {
+            return {
+                currentValue: this.value
+            };
+        },
         computed: {
             classes () {
                 return `${prefixCls}`;
             }
         },
-        compiled () {
+        mounted () {
             this.setActive();
         },
         methods: {
@@ -29,13 +34,13 @@
                 const activeKey = this.getActiveKey();
 
                 this.$children.forEach((child, index) => {
-                    const key = child.key || index.toString();
+                    const name = child.name || index.toString();
                     let isActive = false;
 
                     if (self.accordion) {
-                        isActive = activeKey === key;
+                        isActive = activeKey === name;
                     } else {
-                        isActive = activeKey.indexOf(key) > -1;
+                        isActive = activeKey.indexOf(name) > -1;
                     }
 
                     child.isActive = isActive;
@@ -43,7 +48,7 @@
                 });
             },
             getActiveKey () {
-                let activeKey = this.activeKey || [];
+                let activeKey = this.currentValue || [];
                 const accordion = this.accordion;
 
                 if (!Array.isArray(activeKey)) {
@@ -61,36 +66,40 @@
                 return activeKey;
             },
             toggle (data) {
-                const key = data.key.toString();
+                const name = data.name.toString();
                 let newActiveKey = [];
 
                 if (this.accordion) {
                     if (!data.isActive) {
-                        newActiveKey.push(key);
+                        newActiveKey.push(name);
                     }
                 } else {
                     let activeKey = this.getActiveKey();
-                    const keyIndex = activeKey.indexOf(key);
+                    const nameIndex = activeKey.indexOf(name);
 
                     if (data.isActive) {
-                        if (keyIndex > -1) {
-                            activeKey.splice(keyIndex, 1);
+                        if (nameIndex > -1) {
+                            activeKey.splice(nameIndex, 1);
                         }
                     } else {
-                        if (keyIndex < 0) {
-                            activeKey.push(key);
+                        if (nameIndex < 0) {
+                            activeKey.push(name);
                         }
                     }
 
                     newActiveKey = activeKey;
                 }
 
-                this.activeKey = newActiveKey;
+                this.currentValue = newActiveKey;
+                this.$emit('input', newActiveKey);
                 this.$emit('on-change', newActiveKey);
             }
         },
         watch: {
-            activeKey () {
+            value (val) {
+                this.currentValue = val;
+            },
+            currentValue () {
                 this.setActive();
             }
         }

src/components/collapse/panel.vue

@@ -4,7 +4,7 @@
             <Icon type="arrow-right-b"></Icon>
             <slot></slot>
         </div>
-        <div :class="concentClasses" v-show="isActive">
+        <div :class="contentClasses" v-show="isActive">
             <div :class="boxClasses"><slot name="content"></slot></div>
         </div>
     </div>
@@ -16,13 +16,13 @@
     export default {
         components: { Icon },
         props: {
-            key: {
+            name: {
                 type: String
             }
         },
         data () {
             return {
-                index: 0, // use index for default when key is null
+                index: 0, // use index for default when name is null
                 isActive: false
             };
         },
@@ -38,7 +38,7 @@
             headerClasses () {
                 return `${prefixCls}-header`;
             },
-            concentClasses () {
+            contentClasses () {
                 return `${prefixCls}-content`;
             },
             boxClasses () {
@@ -47,8 +47,9 @@
         },
         methods: {
             toggle () {
+                // todo while向上查找
                 this.$parent.toggle({
-                    key: this.key || this.index,
+                    name: this.name || this.index,
                     isActive: this.isActive
                 });
             }