Vue3中使用navieUI的message方法

不像vue2中使用element UI这么方便，vue3中使用message的配置方法如下：

1，增加一个组件 message-api.vue

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

<script>
import { defineComponent, getCurrentInstance } from "vue";
import { useMessage } from "naive-ui";

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

2，在App.vue中增加如下配置

<template>
  <n-message-provider>
    <MessageApi />
  </n-message-provider>
  <router-view />
</template>

<script>
import MessageApi from "@/components/message-api.vue";
import { NMessageProvider } from "naive-ui";

export default {
  components: { MessageApi, NMessageProvider },
  name: "App",
  setup(props) {},
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>

3.任意组件内使用方式：

window.$message.success("success message");
window.$message.error('error message')
window.$message.warning('warning messsage')