Files
vue-ts-example-2025/src/AppNaiveUIProvider.vue
严浩 b623365e38
All checks were successful
CI/CD Pipeline / playwright (push) Successful in 4m2s
CI/CD Pipeline / build-and-deploy (push) Successful in 4m6s
feat(demos): 添加 Naive UI 组件演示页面
2025-10-30 13:37:31 +08:00

56 lines
1.4 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.$nDialog = useDialog();
window.$nMessage = useMessage();
window.$nNotification = useNotification();
return createTextVNode();
};
</script>
<script lang="ts">
declare global {
export interface Window {
$nLoadingBar?: import('naive-ui').LoadingBarProviderInst;
$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
>
<NLoadingBarProvider>
<NDialogProvider>
<NNotificationProvider>
<NMessageProvider>
<ContextHolder />
<slot></slot>
</NMessageProvider>
</NNotificationProvider>
</NDialogProvider>
</NLoadingBarProvider>
</NConfigProvider>
</template>