3步实现NaiveUI消息组件dialog、message、notification、loadingBar全局挂载配置

项目各版本：

1：根据Naive官方文档，创建自定义组建:

链接：Naive UIhttps://www.naiveui.com/zh-CN/os-theme/components/discrete

​

 

创建一个自定义组件：message.vue，并将各个组件挂载在window上。

<template>
    <div></div>
</template>
  
<script lang="ts">
import { createDiscreteApi } from 'naive-ui'
import { defineComponent } from "vue";

const { message, notification, dialog, loadingBar } = createDiscreteApi(
    ['message', 'dialog', 'notification', 'loadingBar']
)

window.$message = message;
window.$notification = notification;
window.$dialog = dialog;
window.$loadingBar = loadingBar;

export default defineComponent({});
</script>

2：typescript中使用window.$messge 会报错，简单一步搞定：

创建一个***.d.ts的文件，我的自定义文件名是naive-massge.d.ts。

这部分是借鉴（照抄 😄）了如下博主的文章：

NaiveUI对话框dialog和信息message全局挂载配置_苦呀君的博客-CSDN博客

import type { DialogApiInjection } from "naive-ui/lib/dialog/src/DialogProvider";
import type { MessageApiInjection } from "naive-ui/lib/message/src/MessageProvider";
import type { NotificationApiInjection } from "naive-ui/lib/notification/src/NotificationProvider";
import type { LoadingBarInst } from "naive-ui/lib/loading-bar/src/LoadingBarProvider";

declare global {
    interface Window {
        $message: MessageApiInjection;
        $dialog: DialogApiInjection;
        $notification: NotificationApiInjection;
        $loadingBar: LoadingBarInst;
    }
}

3: 在App.vue中引入组件：

 

4:  使用：

​

 

以前也是一名程序员，并且，深爱着职业。被迫全职宝妈4年多，最近在慢慢学习Vue3和TypeScript等前端框架。4年多没有碰电脑，自己摸索起来也是晕头转向。

第一次写文章，肯定有很多不足，欢迎大家的意见。也希望能帮到像我一样被Naive的message困住的人。