fix(components): [popover] after-enter/leave events not trigger (#5681)

packages/components/popover/__tests__/popover.spec.ts

@@ -1,10 +1,12 @@
-import { h } from 'vue'
+import { h, nextTick } from 'vue'
 import { PopupManager } from '@element-plus/utils/popup-manager'
 import makeMount from '@element-plus/test-utils/make-mount'
+import { rAF } from '@element-plus/test-utils/tick'
+import { ElPopperTrigger } from '@element-plus/components/popper'
 import Popover from '../src/index.vue'
 
 const AXIOM = 'Rem is the best girl'
-
+jest.useFakeTimers()
 const mount = makeMount(Popover, {
   slots: {
     default: () => AXIOM,
@@ -103,4 +105,24 @@ describe('Popover.vue', () => {
     const vm = wrapper.vm as any
     expect(vm.hide).toBeDefined()
   })
+
+  test('should be able to emit after-enter and after-leave', async () => {
+    const wrapper = mount({
+      attrs: {
+        trigger: 'click',
+      },
+    })
+    await nextTick()
+    const trigger$ = wrapper.findComponent(ElPopperTrigger)
+    const triggerEl = trigger$.find('.el-tooltip__trigger')
+    await triggerEl.trigger('click')
+    jest.runAllTimers()
+    await rAF()
+    expect(wrapper.emitted()).toHaveProperty('after-enter')
+
+    await triggerEl.trigger('click')
+    jest.runAllTimers()
+    await rAF()
+    expect(wrapper.emitted()).toHaveProperty('after-leave')
+  })
 })

packages/components/popover/src/index.vue

@@ -8,6 +8,8 @@
     :popper-class="kls"
     :popper-style="style"
     persistent
+    @show="afterEnter"
+    @hide="afterLeave"
   >
     <template v-if="$slots.reference">
       <slot name="reference" />
@@ -42,7 +44,7 @@ export default defineComponent({
   },
   props: usePopoverProps,
   emits,
-  setup(props) {
+  setup(props, { emit }) {
     const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)
     const popperRef = computed(() => {
       return unref(tooltipRef)?.popperRef
@@ -75,12 +77,22 @@ export default defineComponent({
       tooltipRef.value?.hide()
     }
 
+    const afterEnter = () => {
+      emit('after-enter')
+    }
+
+    const afterLeave = () => {
+      emit('after-leave')
+    }
+
     return {
       kls,
       style,
       tooltipRef,
       popperRef,
       hide,
+      afterEnter,
+      afterLeave,
     }
   },
 })