feat(Drawer): 增加 onAfterEnter 和 onAfterLeave 事件回调 (#730)

WeBankFinTech · Apr 10, 2024 · c50a1e9 · c50a1e9
1 parent ddff280
commit c50a1e9
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 10 deletions.
diff --git a/components/drawer/drawer.tsx b/components/drawer/drawer.tsx
@@ -22,6 +22,7 @@ import useEsc from '../_util/use/useEsc';
 import { useResizable } from './useResizable';
 import { COMPONENT_NAME, prefixCls } from './const';
 import {
+    AFTER_ENTER_EVENT,
     AFTER_LEAVE_EVENT,
     CANCEL_EVENT,
     OK_EVENT,
@@ -33,7 +34,13 @@ import { useDrawerDimension } from './useDimension';
 const Drawer = defineComponent({
     name: COMPONENT_NAME,
     props: drawerProps,
-    emits: [UPDATE_SHOW_EVENT, OK_EVENT, CANCEL_EVENT, AFTER_LEAVE_EVENT],
+    emits: [
+        UPDATE_SHOW_EVENT,
+        OK_EVENT,
+        CANCEL_EVENT,
+        AFTER_ENTER_EVENT,
+        AFTER_LEAVE_EVENT,
+    ],
     setup(props, ctx) {
         useTheme();
         const zIndex = ref(PopupManager.nextZIndex());
@@ -67,6 +74,9 @@ const Drawer = defineComponent({
             ctx.emit(OK_EVENT, event);
         }
 
+        function handleTransitionAfterEnter(el: Element) {
+            ctx.emit(AFTER_ENTER_EVENT, el);
+        }
         function handleTransitionAfterLeave(el: Element) {
             ctx.emit(AFTER_LEAVE_EVENT, el);
         }
@@ -169,6 +179,7 @@ const Drawer = defineComponent({
                     </Transition>
                     <Transition
                         name={`${prefixCls}-fade`}
+                        onAfterEnter={handleTransitionAfterEnter}
                         onAfterLeave={handleTransitionAfterLeave}
                     >
                         {showDom.value && (

diff --git a/components/drawer/props.ts b/components/drawer/props.ts
@@ -99,4 +99,5 @@ export type DrawerInnerProps = Parameters<
 export const UPDATE_SHOW_EVENT = 'update:show';
 export const OK_EVENT = 'ok';
 export const CANCEL_EVENT = 'cancel';
+export const AFTER_ENTER_EVENT = 'after-enter';
 export const AFTER_LEAVE_EVENT = 'after-leave';
diff --git a/docs/.vitepress/components/drawer/common.vue b/docs/.vitepress/components/drawer/common.vue
@@ -8,14 +8,22 @@
         <FDrawer
             v-model:show="show[0]"
             title="常规"
-            displayDirective="if"
+            displayDirective="show"
             @ok="show[0] = false"
+            @afterEnter="handleAfterEnter"
+            @afterLeave="handleAfterLeave"
         >
             <div>我是内容...</div>
             <div>我是内容...</div>
             <div>我是内容...</div>
         </FDrawer>
-        <FDrawer v-model:show="show[1]" @ok="show[1] = true">
+        <FDrawer
+            v-model:show="show[1]"
+            displayDirective="if"
+            @ok="show[1] = true"
+            @afterEnter="handleAfterEnter"
+            @afterLeave="handleAfterLeave"
+        >
             <FAlert
                 style="margin-bottom: 10px"
                 type="info"
@@ -66,8 +74,18 @@ import { reactive } from 'vue';
 export default {
     setup() {
         const show = reactive([]);
+
+        const handleAfterEnter = (e) => {
+            console.log('[modal.common] handleAfterEnter, e:', e);
+        };
+        const handleAfterLeave = (e) => {
+            console.log('[modal.common] handleAfterLeave, e:', e);
+        };
+
         return {
             show,
+            handleAfterEnter,
+            handleAfterLeave,
         };
     },
 };

diff --git a/docs/.vitepress/components/drawer/index.md b/docs/.vitepress/components/drawer/index.md
@@ -67,6 +67,7 @@ operable.vue
 :::
 
 ### 关闭抽屉
+
 通过配置项可以控制抽屉的关闭方式。
 
 :::demo
@@ -82,7 +83,7 @@ closable.vue
 | closable         | 是否显示右上角关闭图标                                                          | boolean                                 | `true`                |
 | mask             | 是否显示蒙层                                                                    | boolean                                 | `true`                |
 | maskClosable     | 点击蒙层是否允许关闭                                                            | boolean                                 | `true`                |
-| escClosable      | 按下ESC是否允许关闭                                                             | boolean                                 | `true`                |
+| escClosable      | 按下 ESC 是否允许关闭                                                           | boolean                                 | `true`                |
 | operable         | 仅 mask 为 false 时生效，不显示蒙层时，页面是否可交互                           | boolean                                 | `false`               |
 | title            | 标题                                                                            | string                                  | -                     |
 | footer           | 是否显示底部内容                                                                | boolean                                 | `false`               |
@@ -103,10 +104,12 @@ closable.vue
 
 ## Drawer Event
 
-| 事件名称 | 说明                                 | 回调参数 |
-| -------- | ------------------------------------ | -------- |
-| cancel   | 点击遮罩层或右上角叉或取消按钮的回调 | event    |
-| ok       | 点击确定回调                         | event    |
+| 事件名称   | 说明                                 | 回调参数 |
+| ---------- | ------------------------------------ | -------- |
+| cancel     | 点击遮罩层或右上角叉或取消按钮的回调 | event    |
+| ok         | 点击确定回调                         | event    |
+| afterEnter | Drawer 出现后的回调                  | event    |
+| afterLeave | Drawer 关闭后的回调                  | event    |
 
 ## Drawer Slots
 

diff --git a/docs/.vitepress/components/modal/common.vue b/docs/.vitepress/components/modal/common.vue
@@ -10,7 +10,7 @@
         <FModal
             v-model:show="show[0]"
             title="常规"
-            displayDirective="if"
+            displayDirective="show"
             @ok="show[0] = false"
             @afterEnter="handleAfterEnter"
             @afterLeave="handleAfterLeave"
@@ -21,7 +21,7 @@
         </FModal>
         <FModal
             v-model:show="show[1]"
-            displayDirective="show"
+            displayDirective="if"
             @ok="show[1] = false"
             @afterEnter="handleAfterEnter"
             @afterLeave="handleAfterLeave"