feat(drawer): 补充closed事件，用于标识抽屉关闭动画完成 (#4017)

* feat(drawer): 补充closed事件，用于标识抽屉关闭动画完成

* feat(drawer): 为新增的closed事件添加stable版本信息

* feat(drawer): 版本号修改

Author: Yujing613

examples/sites/demos/apis/drawer.js

@@ -236,6 +236,21 @@ export default {
           pcDemo: 'events',
           mfDemo: ''
         },
+        {
+          name: 'closed',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '关闭抽屉动画结束时的事件',
+            'en-US': 'Event emitted when drawer closing animation ends'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'events',
+          mfDemo: '',
+          meta: {
+            stable: '3.29.0'
+          }
+        },
         {
           name: 'confirm',
           type: '() => void',
@@ -371,6 +386,7 @@ interface IDrawerConfigs extends IDrawerProps {
   events: {
     // 监听事件
     close: () => void
+    closed: () => void
     confirm: () => void
     show: (instance: Component) => void
   },

examples/sites/demos/pc/app/drawer/webdoc/drawer.js

@@ -227,6 +227,7 @@ export default {
         'zh-CN': `
           <p><code>open</code>：当抽屉打开时触发；</p>
           <p><code>confirm</code>：当抽屉底部确定按钮点击时触发，该按钮仅当设置 <code>show-footer</code> 属性为 true 时可见；</p>
+          <p><code>closed</code>：当抽屉关闭动画结束时触发；</p>
           <p><code>close</code>：当抽屉关闭时触发。关闭抽屉的途径有：</p>
             <ul>
               <li>点击右上角关闭按钮；</li>
@@ -416,11 +417,11 @@ export default {
       support: {
         value: true
       },
-      description: '支持 open、confirm、close 等事件。',
+      description: '支持 open、confirm、close、closed 等事件。',
       cloud: {
         value: true
       },
-      apis: ['open', 'confirm', 'close'],
+      apis: ['open', 'confirm', 'close', 'closed'],
       demos: ['events']
     }
   ]

packages/renderless/src/drawer/index.ts

@@ -37,6 +37,14 @@ export const close =
     api.handleClose('close', typeof force === 'boolean' ? force : false)
   }
 
+export const closed =
+  ({ state, emit }: Pick<IDrawerRenderlessParams, 'state' | 'emit'>) =>
+  () => {
+    if (!state.visible) {
+      emit('closed')
+    }
+  }
+
 export const watchVisible =
   ({ state, api }: Pick<IDrawerRenderlessParams, 'state' | 'api'>) =>
   (value: boolean) => {

packages/renderless/src/drawer/vue.ts

@@ -1,5 +1,6 @@
 import {
   close,
+  closed,
   watchVisible,
   confirm,
   mousedown,
@@ -25,7 +26,7 @@ import type {
   ISharedRenderlessParamHooks
 } from '@/types'
 
-export const api = ['state', 'close', 'confirm', 'handleClose', 'open']
+export const api = ['state', 'close', 'closed', 'confirm', 'handleClose', 'open']
 
 export const renderless = (
   props: IDrawerProps,
@@ -49,6 +50,7 @@ export const renderless = (
     open: open({ state, emit, vm }),
     confirm: confirm({ api }),
     close: close({ api }),
+    closed: closed({ state, emit }),
     handleClose: handleClose({ emit, props, state }),
     mousedown: mousedown({ state, vm }),
     mousemove: mousemove({ state, props, emit }),

packages/renderless/types/drawer.type.ts

@@ -3,6 +3,7 @@ import type { drawerProps, $constants } from '@/drawer/src'
 import type {
   open,
   close,
+  closed,
   watchVisible,
   confirm,
   mousedown,
@@ -32,6 +33,7 @@ export interface IDrawerApi {
   open: ReturnType<typeof open>
   confirm: ReturnType<typeof confirm>
   close: ReturnType<typeof close>
+  closed: ReturnType<typeof closed>
   mousemove: ReturnType<typeof mousemove>
   mouseup: ReturnType<typeof mouseup>
   mousedown: ReturnType<typeof mousedown>

packages/vue/src/drawer/src/pc.vue

@@ -13,7 +13,7 @@
     </transition>
 
     <!-- main -->
-    <transition :name="`drawer-slide-${placement}`">
+    <transition :name="`drawer-slide-${placement}`" @after-leave="closed">
       <div
         data-tag="tiny-drawer-main"
         ref="drawerBox"
@@ -167,7 +167,7 @@ export default defineComponent({
     'customSlots',
     'closeOnPressEscape'
   ],
-  emits: ['update:visible', 'open', 'close', 'confirm', 'drag'],
+  emits: ['update:visible', 'open', 'close', 'closed', 'confirm', 'drag'],
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }