perf(drawer): perf drawer

src/components/Drawer/src/BasicDrawer.tsx

@@ -1,17 +1,19 @@
-import { Drawer, Row, Col, Button } from 'ant-design-vue';
+import type { DrawerInstance, DrawerProps } from './types';
+
 import { defineComponent, ref, computed, watchEffect, watch, unref, nextTick, toRaw } from 'vue';
+import { Drawer, Row, Col, Button } from 'ant-design-vue';
+
 import { BasicTitle } from '/@/components/Basic';
 import { FullLoading } from '/@/components/Loading/index';
-
-import { getSlot } from '/@/utils/helper/tsxHelper';
-
-import { DrawerInstance, DrawerProps } from './types';
+import { LeftOutlined } from '@ant-design/icons-vue';
 
 import { basicProps } from './props';
+
+import { getSlot } from '/@/utils/helper/tsxHelper';
 import { isFunction, isNumber } from '/@/utils/is';
-import { LeftOutlined } from '@ant-design/icons-vue';
 import { buildUUID } from '/@/utils/uuid';
 import { deepMerge } from '/@/utils';
+
 import './index.less';
 
 const prefixCls = 'basic-drawer';
@@ -31,7 +33,6 @@ export default defineComponent({
 
     const getProps = computed(() => {
       const opt: any = {
-        // @ts-ignore
         placement: 'right',
         ...attrs,
         ...props,
@@ -47,7 +48,6 @@ export default defineComponent({
         opt.wrapClassName = opt.wrapClassName
           ? `${opt.wrapClassName} ${prefixCls}__detail`
           : `${prefixCls}__detail`;
-        // opt.maskClosable = false;
         if (!opt.getContainer) {
           opt.getContainer = `.default-layout__main`;
         }
@@ -128,11 +128,11 @@ export default defineComponent({
             {showOkBtn && (
               <Button
                 type={okType}
-                {...okButtonProps}
-                loading={confirmLoading}
                 onClick={() => {
                   emit('ok');
                 }}
+                {...okButtonProps}
+                loading={confirmLoading}
               >
                 {() => okText}
               </Button>
@@ -152,13 +152,9 @@ export default defineComponent({
             {() => (
               <>
                 {props.showDetailBack && (
-                  <Col class="mx-2">
-                    {() => (
-                      <Button size="small" type="link" onClick={onClose}>
-                        {() => <LeftOutlined />}
-                      </Button>
-                    )}
-                  </Col>
+                  <Button size="small" type="link" onClick={onClose}>
+                    {() => <LeftOutlined />}
+                  </Button>
                 )}
 
                 {title && (

src/components/Drawer/src/types.ts

@@ -5,10 +5,12 @@ import type { ScrollContainerOptions } from '/@/components/Container/index';
 export interface DrawerInstance {
   setDrawerProps: (props: Partial<DrawerProps> | boolean) => void;
 }
+
 export interface ReturnMethods extends DrawerInstance {
   openDrawer: (visible?: boolean) => void;
   transferDrawerData: (data: any) => void;
 }
+
 export type RegisterFn = (drawerInstance: DrawerInstance, uuid?: string) => void;
 
 export interface ReturnInnerMethods extends DrawerInstance {
@@ -19,6 +21,7 @@ export interface ReturnInnerMethods extends DrawerInstance {
 }
 
 export type UseDrawerReturnType = [RegisterFn, ReturnMethods];
+
 export type UseDrawerInnerReturnType = [RegisterFn, ReturnInnerMethods];
 
 export interface DrawerFooterProps {

src/components/Drawer/src/useDrawer.ts

@@ -5,8 +5,11 @@ import type {
   DrawerProps,
   UseDrawerInnerReturnType,
 } from './types';
-import { ref, getCurrentInstance, onUnmounted, unref, reactive, computed } from 'vue';
+
+import { ref, getCurrentInstance, onUnmounted, unref, reactive, computed, watchEffect } from 'vue';
+
 import { isProdMode } from '/@/utils/env';
+import { isFunction } from '/@/utils/is';
 
 const dataTransferRef = reactive<any>({});
 /**
@@ -34,6 +37,7 @@ export function useDrawer(): UseDrawerReturnType {
     drawerRef.value = drawerInstance;
     loadedRef.value = true;
   }
+
   const getInstance = () => {
     const instance = unref(drawerRef);
     if (!instance) {
@@ -41,15 +45,18 @@ export function useDrawer(): UseDrawerReturnType {
     }
     return instance;
   };
+
   const methods: ReturnMethods = {
     setDrawerProps: (props: Partial<DrawerProps>): void => {
       getInstance().setDrawerProps(props);
     },
+
     openDrawer: (visible = true): void => {
       getInstance().setDrawerProps({
         visible: visible,
       });
     },
+
     transferDrawerData(val: any) {
       dataTransferRef[unref(uidRef)] = val;
     },
@@ -57,7 +64,7 @@ export function useDrawer(): UseDrawerReturnType {
 
   return [getDrawer, methods];
 }
-export const useDrawerInner = (): UseDrawerInnerReturnType => {
+export const useDrawerInner = (callbackFn?: Fn): UseDrawerInnerReturnType => {
   const drawerInstanceRef = ref<DrawerInstance | null>(null);
   const currentInstall = getCurrentInstance();
   const uidRef = ref<string>('');
@@ -65,6 +72,7 @@ export const useDrawerInner = (): UseDrawerInnerReturnType => {
   if (!currentInstall) {
     throw new Error('instance is undefined!');
   }
+
   const getInstance = () => {
     const instance = unref(drawerInstanceRef);
     if (!instance) {
@@ -72,26 +80,39 @@ export const useDrawerInner = (): UseDrawerInnerReturnType => {
     }
     return instance;
   };
+
   const register = (modalInstance: DrawerInstance, uuid: string) => {
     uidRef.value = uuid;
     drawerInstanceRef.value = modalInstance;
     currentInstall.emit('register', modalInstance);
   };
+
+  watchEffect(() => {
+    const data = dataTransferRef[unref(uidRef)];
+    if (!data) return;
+    if (!callbackFn || !isFunction(callbackFn)) return;
+    callbackFn(data);
+  });
+
   return [
     register,
     {
       receiveDrawerDataRef: computed(() => {
         return dataTransferRef[unref(uidRef)];
       }),
+
       changeLoading: (loading = true) => {
         getInstance().setDrawerProps({ loading });
       },
+
       changeOkLoading: (loading = true) => {
         getInstance().setDrawerProps({ confirmLoading: loading });
       },
+
       closeDrawer: () => {
         getInstance().setDrawerProps({ visible: false });
       },
+
       setDrawerProps: (props: Partial<DrawerProps>) => {
         getInstance().setDrawerProps(props);
       },