CRM系统前端
查看 | 历史 | 提交 | 提交对比
huangxiaomin
2023-09-27 9f6d61d02c6bee572ca5d6053339a1f965f570b9
提交 | 用户 | age
b6d5e5 1 import type { ButtonProps } from 'ant-design-vue/lib/button/buttonTypes';
ebf7c8 2 import type { CSSProperties, VNodeChild, ComputedRef } from 'vue';
2f6253 3 /**
陈 4  * @description: 弹窗对外暴露的方法
5  */
6 export interface ModalMethods {
7   setModalProps: (props: Partial<ModalProps>) => void;
aaf2fd 8   emitOpen?: (open: boolean, uid: number) => void;
a3a903 9   redoModalHeight?: () => void;
2f6253 10 }
陈 11
c5d24e 12 export type RegisterFn = (modalMethods: ModalMethods, uuid: number) => void;
81baf1 13
2f6253 14 export interface ReturnMethods extends ModalMethods {
ea24df 15   openModal: <T = any>(props?: boolean, data?: T, openOnSet?: boolean) => void;
6d5f9a 16   closeModal: () => void;
aaf2fd 17   getOpen?: ComputedRef<boolean>;
2f6253 18 }
81baf1 19
2f6253 20 export type UseModalReturnType = [RegisterFn, ReturnMethods];
陈 21
22 export interface ReturnInnerMethods extends ModalMethods {
23   closeModal: () => void;
24   changeLoading: (loading: boolean) => void;
25   changeOkLoading: (loading: boolean) => void;
aaf2fd 26   getOpen?: ComputedRef<boolean>;
f732b5 27   redoModalHeight: () => void;
2f6253 28 }
81baf1 29
2f6253 30 export type UseModalInnerReturnType = [RegisterFn, ReturnInnerMethods];
陈 31
32 export interface ModalProps {
5091a8 33   minHeight?: number;
V 34   height?: number;
2f6253 35   // 启用wrapper后 底部可以适当增加高度
陈 36   wrapperFooterOffset?: number;
37   draggable?: boolean;
a3a903 38   scrollTop?: boolean;
2f6253 39
陈 40   // 是否可以进行全屏
41   canFullscreen?: boolean;
c7de65 42   defaultFullscreen?: boolean;
aaf2fd 43   open?: boolean;
2f6253 44   // 温馨提醒信息
陈 45   helpMessage: string | string[];
46
47   // 是否使用modalWrapper
48   useWrapper: boolean;
49
50   loading: boolean;
ebf7c8 51   loadingTip?: string;
2f6253 52
陈 53   wrapperProps: Omit<ModalWrapperProps, 'loading'>;
54
55   showOkBtn: boolean;
56   showCancelBtn: boolean;
57   closeFunc: () => Promise<any>;
58
59   /**
60    * Specify a function that will be called when modal is closed completely.
61    * @type Function
62    */
63   afterClose?: () => any;
64
65   /**
66    * Body style for modal body element. Such as height, padding etc.
67    * @default {}
68    * @type object
69    */
70   bodyStyle?: CSSProperties;
71
72   /**
73    * Text of the Cancel button
74    * @default 'cancel'
75    * @type string
76    */
77   cancelText?: string;
78
79   /**
80    * Centered Modal
81    * @default false
82    * @type boolean
83    */
84   centered?: boolean;
85
86   /**
87    * Whether a close (x) button is visible on top right of the modal dialog or not
88    * @default true
89    * @type boolean
90    */
91   closable?: boolean;
92   /**
93    * Whether a close (x) button is visible on top right of the modal dialog or not
94    */
95   closeIcon?: VNodeChild | JSX.Element;
96
97   /**
98    * Whether to apply loading visual effect for OK button or not
99    * @default false
100    * @type boolean
101    */
102   confirmLoading?: boolean;
103
104   /**
105    * Whether to unmount child components on onClose
106    * @default false
107    * @type boolean
108    */
109   destroyOnClose?: boolean;
110
111   /**
112    * Footer content, set as :footer="null" when you don't need default buttons
113    * @default OK and Cancel buttons
114    * @type any (string | slot)
115    */
116   footer?: VNodeChild | JSX.Element;
117
118   /**
119    * Return the mount node for Modal
120    * @default () => document.body
121    * @type Function
122    */
123   getContainer?: (instance: any) => HTMLElement;
124
125   /**
126    * Whether show mask or not.
127    * @default true
128    * @type boolean
129    */
130   mask?: boolean;
131
132   /**
133    * Whether to close the modal dialog when the mask (area outside the modal) is clicked
134    * @default true
135    * @type boolean
136    */
137   maskClosable?: boolean;
138
139   /**
140    * Style for modal's mask element.
141    * @default {}
142    * @type object
143    */
144   maskStyle?: CSSProperties;
145
146   /**
147    * Text of the OK button
148    * @default 'OK'
149    * @type string
150    */
151   okText?: string;
152
153   /**
154    * Button type of the OK button
155    * @default 'primary'
156    * @type string
157    */
158   okType?: 'primary' | 'danger' | 'dashed' | 'ghost' | 'default';
159
160   /**
161    * The ok button props, follow jsx rules
162    * @type object
163    */
164   okButtonProps?: ButtonProps;
165
166   /**
167    * The cancel button props, follow jsx rules
168    * @type object
169    */
170   cancelButtonProps?: ButtonProps;
171
172   /**
173    * The modal dialog's title
174    * @type any (string | slot)
175    */
176   title?: VNodeChild | JSX.Element;
177
178   /**
179    * Width of the modal dialog
180    * @default 520
181    * @type string | number
182    */
183   width?: string | number;
184
185   /**
186    * The class name of the container of the modal dialog
187    * @type string
188    */
189   wrapClassName?: string;
190
191   /**
192    * The z-index of the Modal
193    * @default 1000
194    * @type number
195    */
196   zIndex?: number;
197 }
198
199 export interface ModalWrapperProps {
200   footerOffset?: number;
201   loading: boolean;
202   modalHeaderHeight: number;
203   modalFooterHeight: number;
204   minHeight: number;
5091a8 205   height: number;
aaf2fd 206   open: boolean;
2f6253 207   fullScreen: boolean;
ebf7c8 208   useWrapper: boolean;
2f6253 209 }