NavieUI的message方法

原文：https://blog.csdn.net/q124467623/article/details/121984575

1. 增加一个组件 MessageApi.vue

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

<script lang="ts">
import { defineComponent } from "vue";
import { useMessage, useDialog } from "naive-ui";

export default defineComponent({
  name: "MessageApi",
  setup() {
    window.$message = useMessage();
    window.$dialog = useDialog();
  }
})
</script>

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

<template>
  <n-message-provider>
    <n-dialog-provider>
      <MessageApi/>
    </n-dialog-provider>
  </n-message-provider>
  <div id="app">
    <router-view />
  </div>
</template>

<script lang="ts">
import MessageApi from "@/components/MessageApi.vue";
import { NMessageProvider, NDialogProvider } from "naive-ui";

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

2.5. 我使用了TypeScript，参考此文章

3. 任意组件内使用方式

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