feat(Collapse): add open、close event (#3176)

example/pages/collapse/index.js

@@ -1,4 +1,5 @@
 import Page from '../../common/page';
+import Toast from '../../dist/toast/toast';
 
 Page({
   data: {
@@ -9,13 +10,25 @@ Page({
     title2: '有赞零售',
     title3: '有赞美业',
     content1: '提供多样店铺模板，快速搭建网上商城',
-    content2: '网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失',
+    content2:
+      '网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失',
     content3: '线上拓客，随时预约，贴心顺手的开单收银'
   },
+
   onChange(event) {
     const { key } = event.currentTarget.dataset;
     this.setData({
       [key]: event.detail
     });
+  },
+
+  onOpen(event) {
+    const openItem = event.detail;
+    Toast(`当前展开的面板的name: ${openItem}`);
+  },
+
+  onClose(event) {
+    const closeItem = event.detail;
+    Toast(`当前关闭的面板的name: ${closeItem}`);
   }
 });

example/pages/collapse/index.wxml

@@ -14,6 +14,14 @@
   </van-collapse>
 </demo-block>
 
+<demo-block title="监听面板打开关闭事件">
+  <van-collapse value="{{ active2 }}" data-key="active2" accordion bind:change="onChange" bind:open="onOpen" bind:close="onClose">
+    <van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
+    <van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
+    <van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
+  </van-collapse>
+</demo-block>
+
 <demo-block title="自定义标题内容">
   <van-collapse value="{{ active3 }}" data-key="active3" bind:change="onChange">
     <van-collapse-item>
@@ -32,3 +40,5 @@
     </van-collapse-item>
   </van-collapse>
 </demo-block>
+
+<van-toast id="van-toast" />

packages/collapse/README.md

@@ -75,6 +75,29 @@ Page({
 });
 ```
 
+### 事件监听
+
+`van-collapse` 提供了 `change`, `open` 和 `close` 事件。`change` 事件在面板切换时触发。`open` 事件在面板展开时触发。`close` 事件在面板关闭时触发。
+
+```html
+<van-collapse
+  value="{{ activeNames }}"
+  bind:change="onChange"
+  bind:open="onOpen"
+  bind:close="onClose"
+>
+  <van-collapse-item title="有赞微商城" name="1">
+    提供多样店铺模板，快速搭建网上商城
+  </van-collapse-item>
+  <van-collapse-item title="有赞零售" name="2">
+    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
+  </van-collapse-item>
+  <van-collapse-item title="有赞美业" name="3">
+    线上拓客，随时预约，贴心顺手的开单收银
+  </van-collapse-item>
+</van-collapse>
+```
+
 ### 自定义标题内容
 
 ```html
@@ -117,6 +140,8 @@ Page({
 | 事件名 | 说明           | 参数                           |
 | ------ | -------------- | ------------------------------ |
 | change | 切换面板时触发 | activeNames: _string \| Array_ |
+| open | 展开面板时触发 | currentName: _string \| number_ |
+| close | 关闭面板时触发 | currentName: _string \| number_ |
 
 ### CollapseItem Props
 

packages/collapse/index.ts

@@ -6,22 +6,22 @@ VantComponent({
   relation: {
     name: 'collapse-item',
     type: 'descendant',
-    current: 'collapse',
+    current: 'collapse'
   },
 
   props: {
     value: {
       type: null,
-      observer: 'updateExpanded',
+      observer: 'updateExpanded'
     },
     accordion: {
       type: Boolean,
-      observer: 'updateExpanded',
+      observer: 'updateExpanded'
     },
     border: {
       type: Boolean,
-      value: true,
-    },
+      value: true
+    }
   },
 
   methods: {
@@ -33,17 +33,25 @@ VantComponent({
 
     switch(name: string | number, expanded: boolean) {
       const { accordion, value } = this.data;
+      const changeItem = name;
       if (!accordion) {
         name = expanded
           ? (value || []).concat(name)
           : (value || []).filter(
-              (activeName: string | number) => activeName !== name
-            );
+            (activeName: string | number) => activeName !== name
+          );
       } else {
         name = expanded ? name : '';
       }
+
+      if (expanded) {
+        this.$emit('open', changeItem);
+      } else {
+        this.$emit('close', changeItem);
+      }
+
       this.$emit('change', name);
       this.$emit('input', name);
-    },
-  },
+    }
+  }
 });