App.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <script setup lang="ts">
  2. import {
  3. NConfigProvider,
  4. NModalProvider,
  5. NDialogProvider,
  6. NNotificationProvider,
  7. NMessageProvider,
  8. NWatermark,
  9. NGlobalStyle,
  10. NEl,
  11. } from 'naive-ui'
  12. import { RouterView } from 'vue-router'
  13. import Noise from '@/components/Noise.vue'
  14. import { getConfigProviderProps } from '@/composable/useDiscreteApi'
  15. import { useConfigureStore } from '@/stores/configure'
  16. const configureStore = useConfigureStore()
  17. const configProviderProps = getConfigProviderProps()
  18. defineOptions({
  19. // 禁止参数透传
  20. inheritAttrs: false
  21. })
  22. import { ref, onMounted } from 'vue';
  23. const configProvider = ref(null)
  24. onMounted(() => {
  25. if (configProvider.value) {
  26. console.log(configProvider.value); // 直接获取当前组件实例的 attrs
  27. }
  28. })
  29. </script>
  30. <template>
  31. <NConfigProvider ref="configProvider" v-bind="configProviderProps">
  32. <NGlobalStyle />
  33. <NEl>
  34. <NModalProvider>
  35. <NNotificationProvider placement="bottom-right">
  36. <NMessageProvider>
  37. <NDialogProvider>
  38. <RouterView />
  39. <NWatermark v-if="configureStore.configure.showWatermark" fullscreen
  40. v-bind="configureStore.configure.watermarkOptions" />
  41. <Noise v-if="configureStore.configure.showNoise" />
  42. </NDialogProvider>
  43. </NMessageProvider>
  44. </NNotificationProvider>
  45. </NModalProvider>
  46. </NEl>
  47. </NConfigProvider>
  48. </template>