fix(collapse): v-modal更新问题修复(#936)

* fix: collapse v-modal更新问题修复

src/packages/collapse/collapse.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nut-collapse" @changeEvt="changeEvt">
+  <div class="nut-collapse">
     <slot></slot>
   </div>
 </template>
@@ -8,32 +8,32 @@ export default {
   name: 'nut-collapse',
   model: {
     prop: 'value',
-    event: 'change-active'
+    event: 'change-active',
   },
   props: {
     value: {
-      type: String | Number
+      type: String | Number,
     },
     accordion: {
-      type: Boolean
+      type: Boolean,
     },
     expandIconPosition: {
       type: String,
-      default: 'right'
+      default: 'right',
     },
     icon: {
       type: String,
-      default: ''
+      default: '',
     },
     rotate: {
       type: Number | String,
-      default: 180
-    }
+      default: 180,
+    },
   },
   watch: {
     value(newVal, oldVal) {
       this.accordionFun(newVal);
-    }
+    },
   },
   data() {
     return {};
@@ -56,16 +56,18 @@ export default {
       let v = JSON.parse(JSON.stringify(this.value));
       index > -1 ? v.splice(index, 1) : v.push(name);
       this.$emit('change-active', v);
+      this.changeEvt(v);
     },
     changeVal(val) {
       this.$emit('change-active', val);
+      this.changeEvt(val);
     },
     // 手风琴模式将所有的item收起，然后对应的展开（默认）
     // 对于展开的再次点击的将其设置成收起，动画效果在item组件中执行
     accordionFun(val) {
       if (val instanceof Array) {
       } else {
-        this.$children.forEach(item => {
+        this.$children.forEach((item) => {
           if (item.name == val && item.openExpanded) {
             item.changeOpen(false);
           } else {
@@ -74,7 +76,7 @@ export default {
           }
         });
       }
-    }
-  }
+    },
+  },
 };
 </script>

src/packages/collapse/demo.vue

@@ -2,39 +2,25 @@
   <div class="demo-list">
     <h4>基本用法</h4>
     <div class="show-demo">
-      <nut-collapse v-model="active1">
-        <nut-collapse-item :title="title1" :name="1">
-          京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
-        </nut-collapse-item>
-        <nut-collapse-item :title="title2" :name="2">
-          京东到家：教师节期间 创意花束销量增长53倍
-        </nut-collapse-item>
+      <nut-collapse v-model="active1" @change="callback">
+        <nut-collapse-item :title="title1" :name="1"> 京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府 </nut-collapse-item>
+        <nut-collapse-item :title="title2" :name="2"> 京东到家：教师节期间 创意花束销量增长53倍 </nut-collapse-item>
         <nut-collapse-item :title="title3" :name="3" disabled> </nut-collapse-item>
       </nut-collapse>
     </div>
     <div class="show-demo">
       <h4>手风琴</h4>
-      <nut-collapse v-model="active2" :accordion="true">
-        <nut-collapse-item :title="title1" :name="1">
-          华为终端操作系统EMUI 11发布，9月11日正式开启
-        </nut-collapse-item>
-        <nut-collapse-item :title="title2" :name="2" :subTitle="subTitle">
-          中国服务机器人市场已占全球市场超1/4
-        </nut-collapse-item>
-        <nut-collapse-item :title="title3" :name="3">
-          QuestMobile：90后互联网用户规模超越80后达3.62亿
-        </nut-collapse-item>
+      <nut-collapse v-model="active2" :accordion="true" @change="callback2">
+        <nut-collapse-item :title="title1" :name="1"> 华为终端操作系统EMUI 11发布，9月11日正式开启 </nut-collapse-item>
+        <nut-collapse-item :title="title2" :name="2" :subTitle="subTitle"> 中国服务机器人市场已占全球市场超1/4 </nut-collapse-item>
+        <nut-collapse-item :title="title3" :name="3"> QuestMobile：90后互联网用户规模超越80后达3.62亿 </nut-collapse-item>
       </nut-collapse>
     </div>
     <div class="show-demo">
       <h4>图标展示</h4>
       <nut-collapse v-model="active3" :accordion="true" :expandIconPosition="expandIconPosition" :icon="icon" :rotate="rotate">
-        <nut-collapse-item :title="title1" :name="1">
-          京东数科IPO将引入“绿鞋机制”
-        </nut-collapse-item>
-        <nut-collapse-item :title="title2" :name="2">
-          世界制造业大会开幕，阿里巴巴与安徽合作再升级
-        </nut-collapse-item>
+        <nut-collapse-item :title="title1" :name="1"> 京东数科IPO将引入“绿鞋机制” </nut-collapse-item>
+        <nut-collapse-item :title="title2" :name="2"> 世界制造业大会开幕，阿里巴巴与安徽合作再升级 </nut-collapse-item>
       </nut-collapse>
     </div>
   </div>
@@ -52,13 +38,16 @@ export default {
       title3: '标题3',
       subTitle: '副标题',
       icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/132849/8/9709/550/5f5f0d8aE802abee7/68bd02b3a52c3988.png',
-      rotate: 90
+      rotate: 90,
     };
   },
   methods: {
     callback(name) {
-      console.log(`点击了name是${name}的面板,callback`);
-    }
-  }
+      console.log(this.active1, `点击了name是${name}的面板,callback`);
+    },
+    callback2(name) {
+      console.log(this.active2, `点击了name是${name}的面板,callback`);
+    },
+  },
 };
 </script>

src/packages/collapse/doc.md

@@ -28,12 +28,12 @@ CollapseItem.install(Vue);
 export default {
   data() {
     return {
-        activeNames: [1, 2]
+      activeNames: [1, 2]
     };
   },
   methods: {
     callback(name) {
-      console.log(`点击了name是${name}的面板,callback`);
+      console.log(activeNames, `点击了name是${name}的面板,callback`);
     }
   }
 };
@@ -65,6 +65,11 @@ export default {
       activeName: 1,
       subTitle: '副标题'
     };
+  },
+   methods: {
+    callback(name) {
+      console.log(activeNames, `点击了name是${name}的面板,callback`);
+    }
   }
 };
 ```

src/packages/collapseitem/collapseitem.vue

@@ -25,21 +25,21 @@ export default {
   props: {
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     subTitle: {
       type: String,
-      default: ''
+      default: '',
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     name: {
       type: Number | String,
       default: -1,
-      required: true
-    }
+      required: true,
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -50,7 +50,7 @@ export default {
         }
       }
       if (active instanceof Array) {
-        let f = active.filter(item => item == this.name);
+        let f = active.filter((item) => item == this.name);
         if (f.length > 0) {
           this.defaultOpen();
         }
@@ -69,8 +69,8 @@ export default {
         'background-image': 'url(https://img10.360buyimg.com/imagetools/jfs/t1/111306/10/17422/341/5f58aa0eEe9218dd6/28d76a42db334e31.png)',
         'background-repeat': 'no-repeat',
         'background-size': '100% 100%',
-        transform: 'rotate(0deg)'
-      }
+        transform: 'rotate(0deg)',
+      },
     };
   },
   methods: {
@@ -81,13 +81,13 @@ export default {
       }
     },
     toggleOpen() {
-      this.$parent.changeEvt(this.name);
+      // this.$parent.changeEvt(this.name);
       if (this.$parent.accordion) {
-        this.$parent.changeVal(this.name);
         if (this.$parent.value == this.name) {
           this.$parent.accordionFun(this.name);
         }
         this.animation();
+        this.$parent.changeVal(this.name);
       } else {
         this.$parent.changeValAry(this.name);
         this.open();
@@ -127,7 +127,7 @@ export default {
     // 清除 willChange 减少性能浪费
     onTransitionEnd() {
       this.$refs.wrapper.style.willChange = 'auto';
-    }
-  }
+    },
+  },
 };
 </script>