NProvider

组件介绍

统一注册 naive-ui 组件，提供全局配置和主题切换、国际化等功能，同时将message、dialog、modal、loading 等组件注入

<script setup lang="ts">
import { NProvider } from '@summeruse/ui'
</script>

<template>
  <NProvider>
    <App />
  </NProvider>
</template>

依赖

navie-ui

使用示例

点我查看代码

NProviderWrapper.vue

<script setup lang="ts">
import { NProvider } from '@summeruse/naive-ui'
import { darkTheme, lightTheme } from 'naive-ui'
import { useData } from 'vitepress'
import { computed } from 'vue'

defineOptions({
  name: 'NProvider',
})
const { isDark } = useData()

const theme = computed(() => {
  return isDark.value ? darkTheme : lightTheme
})

const themeOverrides = computed(() => {
  return isDark.value
    ? {
        common: {
          primaryColor: '#3e63dd',
          primaryColorHover: '#5c73e7',
          primaryColorPressed: '#a8b1ff',
          primaryColorSuppl: '#4d4dff',
        },
      }
    : {
        common: {
          primaryColor: '#5672cd',
          primaryColorHover: '#3a5ccc',
          primaryColorPressed: '#3451b2',
          primaryColorSuppl: '#4d4dff',
        },
      }
})
</script>

<template>
  <NProvider :theme :theme-overrides>
    <slot />
  </NProvider>
</template>

demo.vue

<script setup lang="ts">
import { NButton, NSpace, useDialog, useLoadingBar, useMessage, useModal, useNotification } from 'naive-ui'

const dialog = useDialog()!

const message = useMessage()!

const modal = useModal()!

const notification = useNotification()!

const loadingBar = useLoadingBar()!

function openDialog() {
  dialog.info({
    title: 'dialog',
  })
}

function openMessage() {
  message.info('Message')
}

function openModal() {
  modal.create({
    title: 'modal',
    preset: 'card',
    content: 'modal content',
    style: {
      width: '300px',
    },
  })
}

function openNotification() {
  notification.info({
    title: 'notification',
  })
}

function openLoadingBar() {
  loadingBar.start()
  setTimeout(() => {
    loadingBar.finish()
  }, 2000)
}
</script>

<template>
  <NSpace>
    <NButton @click="openDialog">
      dialog
    </NButton>
    <NButton @click="openMessage">
      message
    </NButton>
    <NButton @click="openModal">
      modal
    </NButton>
    <NButton @click="openNotification">
      notification
    </NButton>
    <NButton @click="openLoadingBar">
      loadingBar
    </NButton>
  </NSpace>
</template>

注入到window

我们将 naive-ui 组件的 message、dialog、modal、notification、loadingBar 等组件注入到 window 对象上，方便在全局范围内使用。

点我查看代码

<script setup lang="ts">
import { useDialog, useLoadingBar, useMessage, useModal, useNotification } from 'naive-ui'
import InjectContentDemo from './inject-content-demo.vue'

window.$message = useMessage()
window.$dialog = useDialog()
window.$notification = useNotification()
window.$loadingBar = useLoadingBar()
window.$modal = useModal()
</script>

<template>
  <InjectContentDemo />
</template>

<script setup lang="ts">
import { NButton, NSpace } from 'naive-ui'

function openDialog() {
  window.$dialog.info({
    title: 'dialog',
    content: 'dialog content',
  })
}
function openMessage() {
  window.$message.info('message content')
}
function openModal() {
  window.$modal.create({
    title: 'modal',
    preset: 'card',
    content: 'modal content',
  })
}
function openNotification() {
  window.$notification.info({
    content: 'notification content',
  })
}
function openLoadingBar() {
  window.$loadingBar.start()
  setTimeout(() => {
    window.$loadingBar.finish()
  }, 1000)
}
</script>

<template>
  <NSpace>
    <NButton @click="openDialog">
      dialog
    </NButton>
    <NButton @click="openMessage">
      message
    </NButton>
    <NButton @click="openModal">
      modal
    </NButton>
    <NButton @click="openNotification">
      notification
    </NButton>
    <NButton @click="openLoadingBar">
      loadingBar
    </NButton>
  </NSpace>
</template>

export {}
declare global {
  interface Window {
    $message: import('naive-ui').MessageApi
    $dialog: import('naive-ui').DialogApi
    $notification: import('naive-ui').NotificationApi
    $loadingBar: import('naive-ui').LoadingBarApi
    $modal: import('naive-ui').ModalApi
  }
}

组件代码

点我查看代码

<script lang="ts" setup>
import type { GlobalThemeOverrides, NDateLocale, NLocale } from 'naive-ui'
import type { BuiltInGlobalTheme } from 'naive-ui/es/themes/interface'
import { NConfigProvider, NDialogProvider, NGlobalStyle, NLoadingBarProvider, NMessageProvider, NModalProvider, NNotificationProvider } from 'naive-ui'

defineOptions({
  name: 'NProvider',
})

withDefaults(
  defineProps<{
    locale?: NLocale
    dateLocale?: NDateLocale
    theme?: BuiltInGlobalTheme
    themeOverrides?: GlobalThemeOverrides
    globalStyle?: boolean
  }>(),
  {
    globalStyle: true,
  },
)
</script>

<template>
  <NConfigProvider :locale :date-locale :theme :theme-overrides>
    <NGlobalStyle v-if="globalStyle" />
    <NModalProvider>
      <NLoadingBarProvider>
        <NNotificationProvider>
          <NMessageProvider>
            <NDialogProvider>
              <slot />
            </NDialogProvider>
          </NMessageProvider>
        </NNotificationProvider>
      </NLoadingBarProvider>
    </NModalProvider>
  </NConfigProvider>
</template>