canrd-outside / order-erp-front · Commits

Commit b6d5e5c96f89c31d4df11e71f2d4cb5ecf8f0b92

Authored by vben
1 parent 94bf854d

perf: enhance openModal and openDrawer

Inline Side-by-side
Showing 6 changed files with 38 additions and 14 deletions
src/components/Drawer/src/types.ts
  View file @b6d5e5c
... ... @@ -7,7 +7,7 @@ export interface DrawerInstance {
7 7 }
8 8  
9 9 export interface ReturnMethods extends DrawerInstance {
10   - openDrawer: (visible?: boolean) => void;
  10 + openDrawer: <T = any>(visible?: boolean, data?: T) => void;
11 11 transferDrawerData: (data: any) => void;
12 12 }
13 13  
... ...
src/components/Drawer/src/useDrawer.ts
  View file @b6d5e5c
... ... @@ -51,10 +51,13 @@ export function useDrawer(): UseDrawerReturnType {
51 51 getInstance().setDrawerProps(props);
52 52 },
53 53  
54   - openDrawer: (visible = true): void => {
  54 + openDrawer: <T = any>(visible = true, data?: T): void => {
55 55 getInstance().setDrawerProps({
56 56 visible: visible,
57 57 });
  58 + if (data) {
  59 + dataTransferRef[unref(uidRef)] = data;
  60 + }
58 61 },
59 62  
60 63 transferDrawerData(val: any) {
... ...
src/components/Modal/src/types.ts
  View file @b6d5e5c
1   -import type { ButtonProps } from 'ant-design-vue/types/button/button';
  1 +import type { ButtonProps } from 'ant-design-vue/lib/button/buttonTypes';
2 2 import type { CSSProperties, VNodeChild } from 'vue';
3 3 /**
4 4 * @description: 弹窗对外暴露的方法
... ... @@ -9,7 +9,7 @@ export interface ModalMethods {
9 9  
10 10 export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void;
11 11 export interface ReturnMethods extends ModalMethods {
12   - openModal: (props?: boolean) => void;
  12 + openModal: <T = any>(props?: boolean, data?: T) => void;
13 13 transferModalData: (data: any) => void;
14 14 }
15 15 export type UseModalReturnType = [RegisterFn, ReturnMethods];
... ...
src/components/Modal/src/useModal.ts
  View file @b6d5e5c
... ... @@ -46,10 +46,13 @@ export function useModal(): UseModalReturnType {
46 46 getInstance().setModalProps(props);
47 47 },
48 48  
49   - openModal: (visible = true): void => {
  49 + openModal: <T = any>(visible = true, data?: T): void => {
50 50 getInstance().setModalProps({
51 51 visible: visible,
52 52 });
  53 + if (data) {
  54 + dataTransferRef[unref(uidRef)] = data;
  55 + }
53 56 },
54 57  
55 58 transferModalData(val: any) {
... ...
src/views/demo/comp/drawer/index.vue
  View file @b6d5e5c
... ... @@ -38,14 +38,23 @@
38 38 const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer();
39 39 const [register2, { openDrawer: openDrawer2 }] = useDrawer();
40 40 const [register3, { openDrawer: openDrawer3 }] = useDrawer();
41   - const [register4, { openDrawer: openDrawer4, transferDrawerData }] = useDrawer();
  41 + const [
  42 + register4,
  43 + {
  44 + openDrawer: openDrawer4,
  45 + // ransferDrawerData
  46 + },
  47 + ] = useDrawer();
42 48 const [register5, { openDrawer: openDrawer5 }] = useDrawer();
43 49 function send() {
44   - transferDrawerData({
  50 + // transferDrawerData({
  51 + // data: 'content',
  52 + // info: 'Info',
  53 + // });
  54 + openDrawer4(true, {
45 55 data: 'content',
46 56 info: 'Info',
47 57 });
48   - openDrawer4(true);
49 58 }
50 59 function openDrawerLoading() {
51 60 openDrawer1();
... ...
src/views/demo/comp/modal/index.vue
  View file @b6d5e5c
... ... @@ -40,19 +40,28 @@
40 40 const [register1, { openModal: openModal1, setModalProps }] = useModal();
41 41 const [register2, { openModal: openModal2 }] = useModal();
42 42 const [register3, { openModal: openModal3 }] = useModal();
43   - const [register4, { openModal: openModal4, transferModalData }] = useModal();
  43 + const [
  44 + register4,
  45 + {
  46 + openModal: openModal4,
  47 + // transferModalData
  48 + },
  49 + ] = useModal();
44 50 function send() {
45   - transferModalData({
46   - data: 'content',
47   - info: 'Info',
48   - });
  51 + // transferModalData({
  52 + // data: 'content',
  53 + // info: 'Info',
  54 + // });
49 55 // setTimeout(() => {
50 56 // transferModalData({
51 57 // data: 'content1',
52 58 // info: 'Info1',
53 59 // });
54 60 // }, 3000);
55   - openModal4(true);
  61 + openModal4(true, {
  62 + data: 'content',
  63 + info: 'Info',
  64 + });
56 65 }
57 66 function openModalLoading() {
58 67 openModal1();
... ...