Files
jdt-mer/src/components/AppProvider/index.vue
2022-06-18 22:00:58 +08:00

39 lines
1.1 KiB
Vue

<template>
<n-config-provider :theme-overrides="themStore.naiveThemeOverrides">
<n-loading-bar-provider>
<LoadingBar />
<n-dialog-provider>
<DialogContent />
<n-message-provider>
<MessageContent />
<n-notification-provider>
<NotificationContent />
<slot></slot>
</n-notification-provider>
</n-message-provider>
</n-dialog-provider>
</n-loading-bar-provider>
</n-config-provider>
</template>
<script setup>
import { watch } from 'vue'
import { useCssVar } from '@vueuse/core'
import MessageContent from './MessageContent.vue'
import DialogContent from './DialogContent.vue'
import LoadingBar from './LoadingBar.vue'
import NotificationContent from './NotificationContent.vue'
import { useThemeStore } from '@/store/modules/theme'
const themStore = useThemeStore()
watch(
() => themStore.naiveThemeOverrides.common,
(vars) => {
for (const key in vars) {
useCssVar(`--${key}`, document.documentElement).value = vars[key]
}
},
{ immediate: true }
)
</script>