首页 前端知识 3步实现NaiveUI消息组件dialog、message、notification、loadingBar全局挂载配置

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

2024-05-19 09:05:52 前端知识 前端哥 253 223 我要收藏

项目各版本:

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困住的人。

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8878.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!