diff --git a/examples/docs/en-US/dialog.md b/examples/docs/en-US/dialog.md index 56649ddc5..3f60fd8e3 100644 --- a/examples/docs/en-US/dialog.md +++ b/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 | — | diff --git a/examples/docs/es/dialog.md b/examples/docs/es/dialog.md index 017f43777..ffe45a3d9 100644 --- a/examples/docs/es/dialog.md +++ b/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 | — | diff --git a/examples/docs/zh-CN/dialog.md b/examples/docs/zh-CN/dialog.md index 9cc1b0d7a..091a42315 100644 --- a/examples/docs/zh-CN/dialog.md +++ b/examples/docs/zh-CN/dialog.md @@ -305,5 +305,6 @@ Dialog 的内容是懒渲染的,即在第一次被打开之前,传入的默 | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | open | Dialog 打开的回调 | — | +| opened | Dialog 打开动画结束时的回调 | — | | close | Dialog 关闭的回调 | — | | closed | Dialog 关闭动画结束时的回调 | — | diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue index e0dad52b2..fc8246811 100644 --- a/packages/dialog/src/component.vue +++ b/packages/dialog/src/component.vue @@ -1,6 +1,7 @@ <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'); } diff --git a/test/unit/specs/dialog.spec.js b/test/unit/specs/dialog.spec.js index 9aea6a4a1..72f3c072a 100644 --- a/test/unit/specs/dialog.spec.js +++ b/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({