support Collapse

support Collapse

CHANGE.md

@@ -18,3 +18,5 @@ class 改为了 className
 新增 on-status-change 事件
 ### Upload 
 父级不能 computed Upload 的 fileList 了
+### Collapse
+废弃 activeKey，使用 v-model，key 是保留的，更名为 name

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
                 });
             }

src/components/progress/progress.vue

@@ -48,7 +48,7 @@
         data () {
             return {
                 currentStatus: this.status
-            }
+            };
         },
         computed: {
             isStatus () {

src/index.js

@@ -12,7 +12,7 @@ import Button from './components/button';
 // import Cascader from './components/cascader';
 import Checkbox from './components/checkbox';
 // import Circle from './components/circle';
-// import Collapse from './components/collapse';
+import Collapse from './components/collapse';
 // import DatePicker from './components/date-picker';
 // import Dropdown from './components/dropdown';
 // import Form from './components/form';
@@ -70,7 +70,7 @@ const iview = {
     // iForm: Form,
     // FormItem: Form.Item,
     iCol: Col,
-    // Collapse,
+    Collapse,
     Icon,
     // iInput: Input,
     Input,
@@ -86,7 +86,7 @@ const iview = {
     // iOption: Option,
     // OptionGroup,
     // Page,
-    // Panel: Collapse.Panel,
+    Panel: Collapse.Panel,
     // Poptip,
     Progress,
     Radio,

test/app.vue

@@ -28,6 +28,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/input-number">InputNumber</router-link></li>
                 <li><router-link to="/progress">Progress</router-link></li>
                 <li><router-link to="/upload">Upload</router-link></li>
+                <li><router-link to="/collapse">Collapse</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -76,6 +76,10 @@ const router = new VueRouter({
         {
             path: '/progress',
             component: require('./routers/progress.vue')
+        },
+        {
+            path: '/collapse',
+            component: require('./routers/collapse.vue')
         }
     ]
 });

test/routers/collapse.vue

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <Collapse v-model="v1" accordion>
+            <Panel name="1">
+                史蒂夫·乔布斯
+                <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
+            </Panel>
+            <Panel name="2">
+                斯蒂夫·盖瑞·沃兹尼亚克
+                <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
+            </Panel>
+            <Panel name="3">
+                乔纳森·伊夫
+                <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
+            </Panel>
+        </Collapse>
+    </div>
+</template>
+<script>
+    export default {
+        props: {},
+        data () {
+            return {
+                v1: '2'
+            };
+        },
+        computed: {},
+        methods: {}
+    };
+</script>