前言

使用 naive UI 框架，如果是在组件内部使用，需要将组将放在 n-message-provider 里面，如下面的例子，在 content 组件内使用，则必须在组件外加上 n-message-provider

<n-message-provider>
  <content />
</n-message-provider>

然后在 content.vue 中

import { useMessage } from 'naive-ui' 

const message = useMessage()
message.info("test") 

但有些时候，我们希望消息组件能够在外部直接调用，naive 也提供了独立的 createDiscreteApi , 可以在 setup 外使用 useDialog、useMessage、useNotification、useLoadingBar组件

创建组件

创建 global.d.ts

interface Window {
    $loadingBar?: import('naive-ui').LoadingBarProviderInst;
    $dialog?: import('naive-ui').DialogProviderInst;
    $message?: import('naive-ui').MessageProviderInst;
    $notification?: import('naive-ui').NotificationProviderInst;
}

新建 globalMessage.ts

主要功能为对话框、信息、通知、加载条

import * as NaiveUI from 'naive-ui'
import { useAppStore } from '@/store'

export function setupNaiveDiscreteApi() {
  const appStore = useAppStore()
  const configProviderProps = computed(() => ({
    theme: appStore.naiveTheme,
  }))
  const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
    ['message', 'dialog', 'notification', 'loadingBar'],
    { configProviderProps },
  )

  window.$loadingBar = loadingBar
  window.$notification = notification
  window.$message = message
  window.$dialog = dialog
}

使用

在组件中直接调用，一个 dialog 弹出框，相关参数参考对应的组件

window.$dialog?.warning({
    title: '成功',
    content: '厉害',
    positiveText: '哇',
    onPositiveClick: () => {
      window.$message?.success('耶！')
    }
  })