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

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

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

export default defineComponent({
  setup() {
    window.$message = useMessage()
  }
})
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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

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

//env.d.ts 

interface Window {
  $message: any
}
1
2
3
4
5