fix(message): fix message component trigger many times bug #1269 (#1270)

* fix(message): fix message component trigger many times bug #1269

* fix(message): fix message component trigger many times bug #1269

* fix(message): delete wait method

packages/message/__tests__/message-manager.spec.ts

@@ -41,19 +41,21 @@ describe('Message on command', () => {
 
   test('it should close all messages', async () => {
     const onClose = jest.fn()
+    const instances = []
     for (let i = 0; i < 4; i++) {
-      Message({
+      const instance = Message({
         onClose,
       })
+      instances.push(instance)
     }
 
     const elements = document.querySelectorAll(selector)
     expect(elements.length).toBe(4)
     Message.closeAll()
     await Vue.nextTick()
-
-    for (let i = 0; i < elements.length; i++) {
-      elements[i].parentElement.dispatchEvent(new Event('transitionend'))
+    for (let i = 0; i < instances.length; i++) {
+      const instance = instances[i]
+      instance.close()
     }
 
     expect(onClose).toHaveBeenCalledTimes(4)

packages/message/__tests__/message.spec.ts

@@ -85,20 +85,6 @@ describe('Message.vue', () => {
       expect(domExports.off).toHaveBeenCalled()
     })
 
-    test('should listen to transitionend on close', async () => {
-      jest.spyOn(domExports, 'on')
-      jest.spyOn(domExports, 'off')
-      const wrapper = _mount({
-        slots: { default: AXIOM },
-      })
-      wrapper.vm.close()
-      await nextTick()
-      expect(domExports.on).toHaveBeenLastCalledWith(
-        wrapper.vm.$el,
-        'transitionend',
-        wrapper.vm.destroyElement,
-      )
-    })
   })
 
   describe('Message.type', () => {
@@ -132,7 +118,8 @@ describe('Message.vue', () => {
 
       const closeBtn = wrapper.find('.el-message__closeBtn')
       expect(closeBtn.exists()).toBe(true)
-      wrapper.vm.destroyElement()
+      wrapper.vm.visible = false
+      wrapper.vm.onClose()
       expect(onClose).toHaveBeenCalled()
     })
 
@@ -198,7 +185,7 @@ describe('Message.vue', () => {
       wrapper.vm.close()
       expect(wrapper.vm.closed).toBe(true)
       await nextTick()
-      await wrapper.trigger('transitionend')
+      await wrapper.vm.onClose()
       expect(onClose).toHaveBeenCalledTimes(1)
     })
   })

packages/message/src/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="el-message-fade">
+  <transition name="el-message-fade" @after-leave="onClose">
     <div
       v-show="visible"
       :id="id"
@@ -38,14 +38,12 @@ import { defineComponent, computed, ref, PropType } from 'vue'
 import type { MessageVM } from './types'
 import { EVENT_CODE } from '../../utils/aria'
 import { on, off } from '../../utils/dom'
-
 const TypeMap: Indexable<string> = {
   success: 'success',
   info: 'info',
   warning: 'warning',
   error: 'error',
 }
-
 export default defineComponent({
   name: 'ElMessage',
   props: {
@@ -75,18 +73,15 @@ export default defineComponent({
         ? `el-message__icon el-icon-${TypeMap[type]}`
         : ''
     })
-
     const customStyle = computed(() => {
       return {
         top: `${props.offset}px`,
         zIndex: props.zIndex,
       }
     })
-
     const visible = ref(false)
     const closed = ref(false)
     const timer = ref(null)
-
     return {
       typeClass,
       customStyle,
@@ -95,14 +90,6 @@ export default defineComponent({
       timer,
     }
   },
-  watch: {
-    closed(newVal: boolean) {
-      if (newVal) {
-        this.visible = false
-        on(this.$el, 'transitionend', this.destroyElement)
-      }
-    },
-  },
   mounted() {
     this.startTimer()
     this.visible = true
@@ -112,11 +99,6 @@ export default defineComponent({
     off(document, 'keydown', this.keydown)
   },
   methods: {
-    destroyElement() {
-      this.visible = false
-      off(this.$el, 'transitionend', this.destroyElement)
-      this.onClose()
-    },
     // start counting down to destroy message instance
     startTimer() {
       if (this.duration > 0) {
@@ -135,6 +117,7 @@ export default defineComponent({
     // Event handlers
     close() {
       this.closed = true
+      this.visible = false
       this.timer = null
     },
     keydown({ code }: KeyboardEvent) {