[improvement] Actionsheet: add cancel event (#796)

docs/demos/views/actionsheet.vue

@@ -7,7 +7,7 @@
 
     <demo-block :title="$t('title2')">
       <van-button @click="show2 = true">{{ $t('button2') }}</van-button>
-      <van-actionsheet v-model="show2" :actions="actions" :cancel-text="$t('cancel')" />
+      <van-actionsheet v-model="show2" :actions="actions" :cancel-text="$t('cancel')" @cancel="handleCancel" />
     </demo-block>
 
     <demo-block :title="$t('title3')">
@@ -61,6 +61,10 @@ export default {
   methods: {
     onClick(item) {
       Toast(item.name);
+    },
+    
+    handleCancel() {
+      Toast('cancel');
     }
   }
 };

docs/markdown/en-US/actionsheet.md

@@ -72,6 +72,12 @@ Actionsheet will get another style if there is a `title` prop.
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | - | - |
 | get-container | Return the mount node for actionsheet | `Function` | - | `() => HTMLElement` |
 
+### Event
+
+| Event | Description | Arguments |
+|-----------|-----------|-----------|
+| cancel | Triggered when cancel click | - |
+
 ### Data struct of actions
 
 | key | Description |

docs/markdown/zh-CN/actionsheet.md

@@ -75,6 +75,12 @@ export default {
 | close-on-click-overlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
 | get-container | 指定挂载的 HTML 节点 | `Function` | - | `() => HTMLElement` |
 
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| cancel | 取消按钮点击时触发 | - |
+
 ### actions
 
 `API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：

packages/actionsheet/index.vue

@@ -3,7 +3,7 @@
     <div class="van-actionsheet" :class="{ 'van-actionsheet--withtitle': title }" v-show="value">
       <div class="van-actionsheet__header van-hairline--top-bottom" v-if="title">
         <div v-text="title" />
-        <icon name="close" @click="$emit('input', false)" />
+        <icon name="close" @click="handleCancel" />
       </div>
       <ul v-else class="van-hairline--bottom">
         <li
@@ -24,7 +24,7 @@
         v-if="cancelText"
         v-text="cancelText"
         class="van-actionsheet__item van-actionsheet__cancel van-hairline--top"
-        @click="$emit('input', false)"
+        @click="handleCancel"
       />
       <div v-else class="van-actionsheet__content">
         <slot />
@@ -65,6 +65,11 @@ export default create({
       if (typeof item.callback === 'function') {
         item.callback(item);
       }
+    },
+
+    handleCancel() {
+      this.$emit('input', false);
+      this.$emit('cancel');
     }
   }
 });

test/specs/actionsheet.spec.js

@@ -107,6 +107,11 @@ describe('ActionSheet', () => {
     const cancelButton = wrapper.find('.van-actionsheet__cancel')[0];
     expect(wrapper.contains('.van-actionsheet__cancel')).to.be.true;
     expect(cancelButton.text()).to.equal('cancel');
+    
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    cancelButton.trigger('click');
+
+    expect(eventStub.calledWith('cancel'));
   });
 
   it('toggle actionsheet value from v-model', (done) => {