mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-27 19:44:50 +08:00
perf: enhance openModal and openDrawer
This commit is contained in:
@@ -7,7 +7,7 @@ export interface DrawerInstance {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface ReturnMethods extends DrawerInstance {
|
export interface ReturnMethods extends DrawerInstance {
|
||||||
openDrawer: (visible?: boolean) => void;
|
openDrawer: <T = any>(visible?: boolean, data?: T) => void;
|
||||||
transferDrawerData: (data: any) => void;
|
transferDrawerData: (data: any) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -51,10 +51,13 @@ export function useDrawer(): UseDrawerReturnType {
|
|||||||
getInstance().setDrawerProps(props);
|
getInstance().setDrawerProps(props);
|
||||||
},
|
},
|
||||||
|
|
||||||
openDrawer: (visible = true): void => {
|
openDrawer: <T = any>(visible = true, data?: T): void => {
|
||||||
getInstance().setDrawerProps({
|
getInstance().setDrawerProps({
|
||||||
visible: visible,
|
visible: visible,
|
||||||
});
|
});
|
||||||
|
if (data) {
|
||||||
|
dataTransferRef[unref(uidRef)] = data;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
transferDrawerData(val: any) {
|
transferDrawerData(val: any) {
|
||||||
|
@@ -1,4 +1,4 @@
|
|||||||
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';
|
import type { CSSProperties, VNodeChild } from 'vue';
|
||||||
/**
|
/**
|
||||||
* @description: 弹窗对外暴露的方法
|
* @description: 弹窗对外暴露的方法
|
||||||
@@ -9,7 +9,7 @@ export interface ModalMethods {
|
|||||||
|
|
||||||
export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void;
|
export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void;
|
||||||
export interface ReturnMethods extends ModalMethods {
|
export interface ReturnMethods extends ModalMethods {
|
||||||
openModal: (props?: boolean) => void;
|
openModal: <T = any>(props?: boolean, data?: T) => void;
|
||||||
transferModalData: (data: any) => void;
|
transferModalData: (data: any) => void;
|
||||||
}
|
}
|
||||||
export type UseModalReturnType = [RegisterFn, ReturnMethods];
|
export type UseModalReturnType = [RegisterFn, ReturnMethods];
|
||||||
|
@@ -46,10 +46,13 @@ export function useModal(): UseModalReturnType {
|
|||||||
getInstance().setModalProps(props);
|
getInstance().setModalProps(props);
|
||||||
},
|
},
|
||||||
|
|
||||||
openModal: (visible = true): void => {
|
openModal: <T = any>(visible = true, data?: T): void => {
|
||||||
getInstance().setModalProps({
|
getInstance().setModalProps({
|
||||||
visible: visible,
|
visible: visible,
|
||||||
});
|
});
|
||||||
|
if (data) {
|
||||||
|
dataTransferRef[unref(uidRef)] = data;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
transferModalData(val: any) {
|
transferModalData(val: any) {
|
||||||
|
@@ -38,14 +38,23 @@
|
|||||||
const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer();
|
const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer();
|
||||||
const [register2, { openDrawer: openDrawer2 }] = useDrawer();
|
const [register2, { openDrawer: openDrawer2 }] = useDrawer();
|
||||||
const [register3, { openDrawer: openDrawer3 }] = useDrawer();
|
const [register3, { openDrawer: openDrawer3 }] = useDrawer();
|
||||||
const [register4, { openDrawer: openDrawer4, transferDrawerData }] = useDrawer();
|
const [
|
||||||
|
register4,
|
||||||
|
{
|
||||||
|
openDrawer: openDrawer4,
|
||||||
|
// ransferDrawerData
|
||||||
|
},
|
||||||
|
] = useDrawer();
|
||||||
const [register5, { openDrawer: openDrawer5 }] = useDrawer();
|
const [register5, { openDrawer: openDrawer5 }] = useDrawer();
|
||||||
function send() {
|
function send() {
|
||||||
transferDrawerData({
|
// transferDrawerData({
|
||||||
|
// data: 'content',
|
||||||
|
// info: 'Info',
|
||||||
|
// });
|
||||||
|
openDrawer4(true, {
|
||||||
data: 'content',
|
data: 'content',
|
||||||
info: 'Info',
|
info: 'Info',
|
||||||
});
|
});
|
||||||
openDrawer4(true);
|
|
||||||
}
|
}
|
||||||
function openDrawerLoading() {
|
function openDrawerLoading() {
|
||||||
openDrawer1();
|
openDrawer1();
|
||||||
|
@@ -40,19 +40,28 @@
|
|||||||
const [register1, { openModal: openModal1, setModalProps }] = useModal();
|
const [register1, { openModal: openModal1, setModalProps }] = useModal();
|
||||||
const [register2, { openModal: openModal2 }] = useModal();
|
const [register2, { openModal: openModal2 }] = useModal();
|
||||||
const [register3, { openModal: openModal3 }] = useModal();
|
const [register3, { openModal: openModal3 }] = useModal();
|
||||||
const [register4, { openModal: openModal4, transferModalData }] = useModal();
|
const [
|
||||||
|
register4,
|
||||||
|
{
|
||||||
|
openModal: openModal4,
|
||||||
|
// transferModalData
|
||||||
|
},
|
||||||
|
] = useModal();
|
||||||
function send() {
|
function send() {
|
||||||
transferModalData({
|
// transferModalData({
|
||||||
data: 'content',
|
// data: 'content',
|
||||||
info: 'Info',
|
// info: 'Info',
|
||||||
});
|
// });
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// transferModalData({
|
// transferModalData({
|
||||||
// data: 'content1',
|
// data: 'content1',
|
||||||
// info: 'Info1',
|
// info: 'Info1',
|
||||||
// });
|
// });
|
||||||
// }, 3000);
|
// }, 3000);
|
||||||
openModal4(true);
|
openModal4(true, {
|
||||||
|
data: 'content',
|
||||||
|
info: 'Info',
|
||||||
|
});
|
||||||
}
|
}
|
||||||
function openModalLoading() {
|
function openModalLoading() {
|
||||||
openModal1();
|
openModal1();
|
||||||
|
Reference in New Issue
Block a user