Files
vue-ts-example-2025/src/AppNaiveUIProvider.vue
严浩 5b54fe5182
All checks were successful
CI/CD Pipeline / playwright (push) Successful in 2m10s
CI/CD Pipeline / build-and-deploy (push) Successful in 4m16s
feat(naive-ui): 添加 Modal 命令式 API 支持并完善类型声明
2025-10-30 14:18:06 +08:00

60 lines
1.6 KiB
Vue

<script setup lang="ts">
import type { GlobalThemeOverrides } from 'naive-ui';
import { darkTheme } from 'naive-ui';
import type { FunctionalComponent } from 'vue';
import { createTextVNode } from 'vue';
const appStore = useAppStore();
// https://www.naiveui.com/zh-CN/light/docs/customize-theme
const themeOverrides: GlobalThemeOverrides = {
common: {},
};
const ContextHolder: FunctionalComponent = () => {
window.$nLoadingBar = useLoadingBar();
window.$nModal = useModal();
window.$nDialog = useDialog();
window.$nMessage = useMessage();
window.$nNotification = useNotification();
return createTextVNode();
};
</script>
<script lang="ts">
declare global {
export interface Window {
$nLoadingBar?: import('naive-ui').LoadingBarProviderInst;
$nModal?: import('naive-ui').ModalProviderInst;
$nDialog?: import('naive-ui').DialogProviderInst;
$nMessage?: import('naive-ui').MessageProviderInst;
$nNotification?: import('naive-ui').NotificationProviderInst;
}
/** Build time of the project */
export const BUILD_TIME: string;
}
</script>
<template>
<NConfigProvider
:theme-overrides
preflight-style-disabled
:theme="appStore.isDark ? darkTheme : null"
abstract
>
<n-loading-bar-provider>
<n-message-provider>
<n-notification-provider>
<n-modal-provider>
<n-dialog-provider>
<slot></slot>
<ContextHolder />
</n-dialog-provider>
</n-modal-provider>
</n-notification-provider>
</n-message-provider>
</n-loading-bar-provider>
</NConfigProvider>
</template>