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/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, useDialog, useMessage, useModal, useNotification } from 'naive-ui'

const dialog = useDialog()!

const message = useMessage()!

const modal = useModal()!

const notification = useNotification()!

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',
  })
}
</script>

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

组件代码

点我查看代码

<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, NMessageProvider, NModalProvider, NNotificationProvider } from 'naive-ui'

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>
      <NNotificationProvider>
        <NMessageProvider>
          <NDialogProvider>
            <slot />
          </NDialogProvider>
        </NMessageProvider>
      </NNotificationProvider>
    </NModalProvider>
  </NConfigProvider>
</template>