Vue3 + Naive UI的消息组件

消息组件失效

在使用Vue3 + Naive UI进行开发的时候，出现了消息组件的失效，由于官方文档的脱离上下文的API的方式无法使用，然后找到了一篇文章：https://blog.csdn.net/db_vg/article/details/127569106。

使用手动封装组件进行全局挂载配置。

1.创建一个Message.vue组件

<script setup>
// 引入createDiscreteApi
import { createDiscreteApi } from 'naive-ui'

// 获取所有的消息组件
const { message, notification, dialog, loadingBar } = createDiscreteApi(
    ['message', 'dialog', 'notification', 'loadingBar']
)

// 全局挂载windows
window.$message = message;
window.$notification = notification;
window.$dialog = dialog;
window.$loadingBar = loadingBar;
</script>

<template>
  <div></div>
</template>

2.App.vue中引入组件

<template>

  <div id="app">
    <Message/>
    <router-view/>
  </div>
</template>

<style>

body {
  margin: 0;
  padding: 0;
  background-color: #eee;
}
* {
  box-sizing: border-box;
}

th {
  background-color: aliceblue !important;
}
</style>
<script setup>
import { NMessageProvider, NDialogProvider } from "naive-ui";
// 引入写好的组件
import Message from './components/Message.vue'
</script>