feat(全局): 添加全局弹窗上下文组件并声明类型
添加 PopupContext 组件用于全局提供 message、modal 和 notification 方法 在 global.d.ts 中声明对应的 window 类型 将 analytics 页面的 notification 调用改为使用全局方法
This commit is contained in:
parent
5776672901
commit
ba65f750d4
@ -9,6 +9,7 @@ import { App, ConfigProvider, theme } from 'antdv-next';
|
||||
import { antdLocale } from '#/locales';
|
||||
|
||||
import { useUploadTip } from './upload-tip';
|
||||
import { PopupContext } from './utils/context';
|
||||
|
||||
defineOptions({ name: 'App' });
|
||||
|
||||
@ -38,6 +39,7 @@ useUploadTip();
|
||||
<ConfigProvider :locale="antdLocale" :theme="tokenTheme" variant="outlined">
|
||||
<App>
|
||||
<RouterView />
|
||||
<PopupContext />
|
||||
</App>
|
||||
</ConfigProvider>
|
||||
</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,
|
||||
} from '@vben/icons';
|
||||
|
||||
import { Alert, notification } from 'antdv-next';
|
||||
import { Alert } from 'antdv-next';
|
||||
|
||||
import AnalyticsTrends from './analytics-trends.vue';
|
||||
import AnalyticsVisitsData from './analytics-visits-data.vue';
|
||||
@ -67,7 +67,7 @@ const chartTabs: TabOption[] = [
|
||||
];
|
||||
|
||||
function handleClick() {
|
||||
notification.success({
|
||||
window.notification.success({
|
||||
title: '新的 notification 样式',
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user