mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-04-09 18:23:15 +08:00
feat(全局): 添加全局弹窗上下文组件并声明类型
添加 PopupContext 组件用于全局提供 message、modal 和 notification 方法 在 global.d.ts 中声明对应的 window 类型 将 analytics 页面的 notification 调用改为使用全局方法
This commit is contained in:
@@ -9,6 +9,7 @@ import { App, ConfigProvider, theme } from 'antdv-next';
|
|||||||
import { antdLocale } from '#/locales';
|
import { antdLocale } from '#/locales';
|
||||||
|
|
||||||
import { useUploadTip } from './upload-tip';
|
import { useUploadTip } from './upload-tip';
|
||||||
|
import { PopupContext } from './utils/context';
|
||||||
|
|
||||||
defineOptions({ name: 'App' });
|
defineOptions({ name: 'App' });
|
||||||
|
|
||||||
@@ -38,6 +39,7 @@ useUploadTip();
|
|||||||
<ConfigProvider :locale="antdLocale" :theme="tokenTheme" variant="outlined">
|
<ConfigProvider :locale="antdLocale" :theme="tokenTheme" variant="outlined">
|
||||||
<App>
|
<App>
|
||||||
<RouterView />
|
<RouterView />
|
||||||
|
<PopupContext />
|
||||||
</App>
|
</App>
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
20
apps/web-antd/src/utils/context.tsx
Normal file
20
apps/web-antd/src/utils/context.tsx
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import { defineComponent } from 'vue';
|
||||||
|
|
||||||
|
import { App } from 'antdv-next';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 弹窗上下文
|
||||||
|
* 提供 message, modal, notification 方法
|
||||||
|
* @see https://ant.design/components/app-cn#global-scene-redux
|
||||||
|
*/
|
||||||
|
export const PopupContext = defineComponent({
|
||||||
|
name: 'PopupContext',
|
||||||
|
render() {
|
||||||
|
const staticFunction = App.useApp();
|
||||||
|
window.message = staticFunction.message;
|
||||||
|
window.modal = staticFunction.modal;
|
||||||
|
window.notification = staticFunction.notification;
|
||||||
|
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -15,7 +15,7 @@ import {
|
|||||||
SvgDownloadIcon,
|
SvgDownloadIcon,
|
||||||
} from '@vben/icons';
|
} from '@vben/icons';
|
||||||
|
|
||||||
import { Alert, notification } from 'antdv-next';
|
import { Alert } from 'antdv-next';
|
||||||
|
|
||||||
import AnalyticsTrends from './analytics-trends.vue';
|
import AnalyticsTrends from './analytics-trends.vue';
|
||||||
import AnalyticsVisitsData from './analytics-visits-data.vue';
|
import AnalyticsVisitsData from './analytics-visits-data.vue';
|
||||||
@@ -67,7 +67,7 @@ const chartTabs: TabOption[] = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
function handleClick() {
|
function handleClick() {
|
||||||
notification.success({
|
window.notification.success({
|
||||||
title: '新的 notification 样式',
|
title: '新的 notification 样式',
|
||||||
description: 'ant design',
|
description: 'ant design',
|
||||||
});
|
});
|
||||||
|
|||||||
11
apps/web-antd/types/global.d.ts
vendored
Normal file
11
apps/web-antd/types/global.d.ts
vendored
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import type { MessageInstance } from 'antdv-next/dist/message/interface';
|
||||||
|
import type { ModalStaticFunctions } from 'antdv-next/dist/modal/confirm';
|
||||||
|
import type { NotificationInstance } from 'antdv-next/dist/notification/interface';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
message: MessageInstance;
|
||||||
|
modal: Omit<ModalStaticFunctions, 'warn'>;
|
||||||
|
notification: NotificationInstance;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user