Naive UI 中使用message组件，在.vue文件之外使用

Naive UI 中使用message组件，如果你想在 setup 外使用信息，你需要在顶层 setup 中把 useMessage 返回的 message 值挂载到 window 下然后再调用，调用前需要确保 message 已经挂载成功。

<!--
 * @Author: yintao
 * @Date: 2023-11-15 10:55:13
 * @LastEditTime: 2023-10-25 14:09:03
 * @LastEditors: yintao
 * @Description: 消息提示容器组件 MessageContent.vue
-->

<template></template>
<script>
import { useMessage } from 'naive-ui'
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    window.$message = useMessage()
  }
})
</script>

<!--
 * @Author: yintao
 * @Date: 2022-02-16 10:55:13
 * @LastEditTime: 2023-10-25 14:09:03
 * @LastEditors: yintao
 * @Description: App.vue
-->

<!--
*如果你想使用信息，你需要把调用其方法的组件放在 n-message-provider 内部
*<n-message-provider>
*  <MessageContent/>
*</n-message-provider>
-->


<template>
  <n-config-provider
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme-overrides="customStyle"
  >
    <n-message-provider>
      <n-dialog-provider>
        <loading-provider>
          <!-- 消息提示容器组件 -->
          <MessageContent />
          <router-view />
        </loading-provider>
      </n-dialog-provider>
    </n-message-provider>
  </n-config-provider>
</template>
<script setup lang="ts">
import {
  NConfigProvider,
  NDialogProvider,
  NMessageProvider,
  zhCN,
  dateZhCN
} from 'naive-ui'
import LoadingProvider from './components/loading/LoadingProvider.vue'
import customStyle from './style_config'
import MessageContent from '@/views/MessageContent.vue'
</script>

//在js文件中使用
window.$message.error(`跳转失败！${err}`)

如果你使用的是TS，在.d.ts为后缀的文件中声明

//env.d.ts 

interface Window {
  $message: any
}