perf: enhance openModal and openDrawer

vben
1 parent 94bf854d
Showing 6 changed files with 38 additions and 14 deletions
src/components/Drawer/src/types.ts
src/components/Drawer/src/useDrawer.ts
src/components/Modal/src/types.ts
src/components/Modal/src/useModal.ts
src/views/demo/comp/drawer/index.vue
src/views/demo/comp/modal/index.vue
@@ -7,7 +7,7 @@ export interface DrawerInstance {
 }
 export interface ReturnMethods extends DrawerInstance {
-  openDrawer: (visible?: boolean) => void;
+  openDrawer: <T = any>(visible?: boolean, data?: T) => void;
   transferDrawerData: (data: any) => void;
 }
@@ -51,10 +51,13 @@ export function useDrawer(): UseDrawerReturnType {
       getInstance().setDrawerProps(props);
     },
-    openDrawer: (visible = true): void => {
+    openDrawer: <T = any>(visible = true, data?: T): void => {
       getInstance().setDrawerProps({
         visible: visible,
       });
+      if (data) {
+        dataTransferRef[unref(uidRef)] = data;
+      }
     },
     transferDrawerData(val: any) {
-import type { ButtonProps } from 'ant-design-vue/types/button/button';
+import type { ButtonProps } from 'ant-design-vue/lib/button/buttonTypes';
 import type { CSSProperties, VNodeChild } from 'vue';
 /**
  * @description: 弹窗对外暴露的方法
@@ -9,7 +9,7 @@ export interface ModalMethods {
 export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void;
 export interface ReturnMethods extends ModalMethods {
-  openModal: (props?: boolean) => void;
+  openModal: <T = any>(props?: boolean, data?: T) => void;
   transferModalData: (data: any) => void;
 }
 export type UseModalReturnType = [RegisterFn, ReturnMethods];
@@ -46,10 +46,13 @@ export function useModal(): UseModalReturnType {
       getInstance().setModalProps(props);
     },
-    openModal: (visible = true): void => {
+    openModal: <T = any>(visible = true, data?: T): void => {
       getInstance().setModalProps({
         visible: visible,
       });
+      if (data) {
+        dataTransferRef[unref(uidRef)] = data;
+      }
     },
     transferModalData(val: any) {
@@ -38,14 +38,23 @@
       const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer();
       const [register2, { openDrawer: openDrawer2 }] = useDrawer();
       const [register3, { openDrawer: openDrawer3 }] = useDrawer();
-      const [register4, { openDrawer: openDrawer4, transferDrawerData }] = useDrawer();
+      const [
+        register4,
+        {
+          openDrawer: openDrawer4,
+          // ransferDrawerData
+        },
+      ] = useDrawer();
       const [register5, { openDrawer: openDrawer5 }] = useDrawer();
       function send() {
-        transferDrawerData({
+        // transferDrawerData({
+        //   data: 'content',
+        //   info: 'Info',
+        // });
+        openDrawer4(true, {
           data: 'content',
           info: 'Info',
         });
-        openDrawer4(true);
       }
       function openDrawerLoading() {
         openDrawer1();
@@ -40,19 +40,28 @@
       const [register1, { openModal: openModal1, setModalProps }] = useModal();
       const [register2, { openModal: openModal2 }] = useModal();
       const [register3, { openModal: openModal3 }] = useModal();
-      const [register4, { openModal: openModal4, transferModalData }] = useModal();
+      const [
+        register4,
+        {
+          openModal: openModal4,
+          // transferModalData
+        },
+      ] = useModal();
       function send() {
-        transferModalData({
-          data: 'content',
-          info: 'Info',
-        });
+        // transferModalData({
+        //   data: 'content',
+        //   info: 'Info',
+        // });
         // setTimeout(() => {
         //   transferModalData({
         //     data: 'content1',
         //     info: 'Info1',
         //   });
         // }, 3000);
-        openModal4(true);
+        openModal4(true, {
+          data: 'content',
+          info: 'Info',
+        });
       }
       function openModalLoading() {
         openModal1();