feat(Dialog): add open、close event (#4633)

src/dialog/README.md

@@ -162,6 +162,8 @@ export default {
 |------|------|------|
 | confirm | Triggered when click confirm button | - |
 | cancel | Triggered when click cancel button | - |
+| open | Triggered when open Dialog | - |
+| close | Triggered when close Dialog | - |
 
 ### Slots
 

src/dialog/README.zh-CN.md

@@ -159,7 +159,7 @@ export default {
 | cancelButtonColor | 取消按钮颜色 | *string* | `#000` | - |
 | overlay | 是否展示遮罩层 | *boolean* | `true` | - |
 | closeOnPopstate | 是否在页面回退时自动关闭 | *boolean* | `false` | 2.0.5 |
-| closeOnClickOverlay | 点击遮罩层时是否关闭弹窗 | *boolean* | `false` | - |
+| closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | *boolean* | `false` | - |
 | lockScroll | 是否锁定背景滚动 | *boolean* | `true` | - |
 | beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - | - |
 | getContainer | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | `body` | - |
@@ -182,7 +182,7 @@ export default {
 | cancel-button-color | 取消按钮颜色 | *string* | `#000` | - |
 | overlay | 是否展示遮罩层 | *boolean* | `true` | - |
 | close-on-popstate | 是否在页面回退时自动关闭 | *boolean* | `false` | 2.0.5 |
-| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `false` | - |
+| close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | *boolean* | `false` | - |
 | lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | - |
 | before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - | - |
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | - | - |
@@ -195,6 +195,8 @@ export default {
 |------|------|------|
 | confirm | 点击确认按钮时触发 | - |
 | cancel | 点击取消按钮时触发 | - |
+| open | 打开弹窗时触发 | - |
+| close | 关闭弹窗时触发 | - |
 
 ### Slots
 

src/dialog/demo/index.vue

@@ -1,51 +1,21 @@
 <template>
   <demo-section>
     <demo-block :title="$t('alert1')">
-      <van-button
-        type="primary"
-        @click="onClickAlert"
-      >
-        {{ $t('alert1') }}
-      </van-button>
-      <van-button
-        type="primary"
-        @click="onClickAlert2"
-      >
-        {{ $t('alert2') }}
-      </van-button>
+      <van-button type="primary" @click="onClickAlert">{{ $t('alert1') }}</van-button>
+      <van-button type="primary" @click="onClickAlert2">{{ $t('alert2') }}</van-button>
     </demo-block>
 
     <demo-block :title="$t('confirm')">
-      <van-button
-        type="primary"
-        @click="onClickConfirm"
-      >
-        {{ $t('confirm') }}
-      </van-button>
+      <van-button type="primary" @click="onClickConfirm">{{ $t('confirm') }}</van-button>
     </demo-block>
 
     <demo-block :title="$t('asyncClose')">
-      <van-button
-        type="primary"
-        @click="onClickAsyncClose"
-      >
-        {{ $t('asyncClose') }}
-      </van-button>
+      <van-button type="primary" @click="onClickAsyncClose">{{ $t('asyncClose') }}</van-button>
     </demo-block>
 
     <demo-block :title="$t('componentCall')">
-      <van-button
-        type="primary"
-        @click="show = true"
-      >
-        {{ $t('componentCall') }}
-      </van-button>
-      <van-dialog
-        v-model="show"
-        :title="$t('title')"
-        show-cancel-button
-        :lazy-render="false"
-      >
+      <van-button type="primary" @click="show = true">{{ $t('componentCall') }}</van-button>
+      <van-dialog v-model="show" :title="$t('title')" show-cancel-button :lazy-render="false">
         <img :src="image">
       </van-dialog>
     </demo-block>
@@ -68,7 +38,7 @@ export default {
       alert2: 'Alert without title',
       confirm: 'Confirm dialog',
       asyncClose: 'Async Close',
-      componentCall: 'Component Call',
+      componentCall: 'Component Call'
     }
   },
 
@@ -121,7 +91,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-dialog {
   background-color: @white;

src/dialog/test/__snapshots__/demo.spec.js.snap

@@ -2,20 +2,10 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      提示弹窗
-    </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      提示弹窗（无标题）
-    </span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      确认弹窗
-    </span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      异步关闭
-    </span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      组件调用
-    </span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">提示弹窗</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">提示弹窗（无标题）</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">确认弹窗</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">异步关闭</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">组件调用</span></button>
     <div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
       <div class="van-dialog__header">标题</div>
       <div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>

src/dialog/test/index.spec.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Dialog from '..';
-import DialogVue from '../Dialog';
+import DialogComponent from '../Dialog';
 import { mount, later, trigger } from '../../../test/utils';
 
 test('Dialog function call', async () => {
@@ -33,7 +33,7 @@ test('Dialog function call', async () => {
 });
 
 test('before close', () => {
-  const wrapper = mount(DialogVue, {
+  const wrapper = mount(DialogComponent, {
     propsData: {
       value: true,
       showCancelButton: true,
@@ -72,11 +72,11 @@ test('set default options', () => {
 
 test('register component', () => {
   Vue.use(Dialog);
-  expect(Vue.component(DialogVue.name)).toBeTruthy();
+  expect(Vue.component(DialogComponent.name)).toBeTruthy();
 });
 
 test('button color', () => {
-  const wrapper = mount(DialogVue, {
+  const wrapper = mount(DialogComponent, {
     propsData: {
       value: true,
       showCancelButton: true,
@@ -88,7 +88,7 @@ test('button color', () => {
 });
 
 test('button text', () => {
-  const wrapper = mount(DialogVue, {
+  const wrapper = mount(DialogComponent, {
     propsData: {
       value: true,
       showCancelButton: true,
@@ -100,11 +100,11 @@ test('button text', () => {
 });
 
 test('dialog component', () => {
-  expect(Dialog.Component).toEqual(DialogVue);
+  expect(Dialog.Component).toEqual(DialogComponent);
 });
 
 test('default slot', () => {
-  const wrapper = mount(DialogVue, {
+  const wrapper = mount(DialogComponent, {
     propsData: {
       value: true
     },
@@ -116,7 +116,7 @@ test('default slot', () => {
 });
 
 test('title slot', () => {
-  const wrapper = mount(DialogVue, {
+  const wrapper = mount(DialogComponent, {
     propsData: {
       value: true
     },
@@ -126,3 +126,11 @@ test('title slot', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('open & close event', () => {
+  const wrapper = mount(DialogComponent);
+  wrapper.vm.value = true;
+  expect(wrapper.emitted('open')).toBeTruthy();
+  wrapper.vm.value = false;
+  expect(wrapper.emitted('close')).toBeTruthy();
+});