Dialog: add opened event (#12828)

* Dialog: add opened event

* Docs: update es dialog doc

* Update dialog.md

examples/docs/en-US/dialog.md

@@ -309,5 +309,6 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
 | open | triggers when the Dialog opens | — |
+| opened | triggers when the Dialog opening animation ends | — |
 | close | triggers when the Dialog closes | — |
 | closed | triggers when the Dialog closing animation ends | — |

examples/docs/es/dialog.md

@@ -317,6 +317,7 @@ Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no pu
 | Nombre de Evento | Descripcíon                              | Parámetros |
 | ---------------- | ---------------------------------------- | ---------- |
 | open             | se activa cuando se abre el cuadro de Diálogo | —          |
+| opened           | triggers when the Dialog opening animation ends | — |
 | close            | se dispara cuando el Diálogo se cierra   | —          |
 | closed           | se activa cuando finaliza la animación de cierre del Diálog | — |
 

examples/docs/zh-CN/dialog.md

@@ -305,5 +305,6 @@ Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | open  | Dialog 打开的回调 | — |
+| opened  | Dialog 打开动画结束时的回调 | — |
 | close  | Dialog 关闭的回调 | — |
 | closed | Dialog 关闭动画结束时的回调 | — |

packages/dialog/src/component.vue

 <template>
   <transition
     name="dialog-fade"
+    @after-enter="afterEnter"
     @after-leave="afterLeave">
     <div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick">
       <div
@@ -169,6 +170,9 @@
         this.broadcast('ElSelectDropdown', 'updatePopper');
         this.broadcast('ElDropdownMenu', 'updatePopper');
       },
+      afterEnter() {
+        this.$emit('opened');
+      },
       afterLeave() {
         this.$emit('closed');
       }

test/unit/specs/dialog.spec.js

@@ -157,7 +157,9 @@ describe('Dialog', () => {
         <div>
           <el-dialog
             @open="handleOpen"
+            @opened="handleOpened"
             @close="handleClose"
+            @closed="handleClosed"
             :title="title"
             :visible.sync="visible">
             <span>这是一段信息</span>
@@ -170,14 +172,23 @@ describe('Dialog', () => {
           this.state = 'open';
         },
 
+        handleOpened() {
+          this.animationState = 'opened';
+        },
+
         handleClose() {
-          this.state = 'closed';
+          this.state = 'close';
+        },
+
+        handleClosed() {
+          this.animationState = 'closed';
         }
       },
 
       data() {
         return {
           state: '',
+          animationState: '',
           title: 'dialog test',
           visible: false
         };
@@ -186,12 +197,14 @@ describe('Dialog', () => {
     vm.visible = true;
     setTimeout(() => {
       expect(vm.state).to.equal('open');
+      expect(vm.animationState).to.equal('opened');
       vm.visible = false;
       setTimeout(() => {
-        expect(vm.state).to.equal('closed');
+        expect(vm.state).to.equal('close');
+        expect(vm.animationState).to.equal('closed');
         done();
-      }, 50);
-    }, 50);
+      }, 400);
+    }, 400);
   });
   it('click dialog to close', done => {
     vm = createVue({