vue vue3 typescript NaiveUI对话框dialog和信息message全局挂载配置

vue3版本全局挂载方法不再绑定在vue实例上，这里我们将全局方法绑定在window实例上

首先定义一个组件用来挂载全局方法，名字根据个人喜好定义即可，这里以global.vue为例：

// global.vue

// 挂载window下方法组件

// 我是全局用路由控制页面，如果有其他嵌套组件布局等，引入相应的替换即可

修改App.vue文件，将naive对应所需的n-message-provider和n-dialog-provider嵌套，注意如果为按需引入的方式，不要忘记import这两个组件：

// App.vue

这样就可以在全局调用了，不论是vue还是js文件：

// example.vue

// example.ts

window.$dialog.warning({

title: '警告',

content: '你确定？',

positiveText: '确定',

negativeText: '不确定',

onPositiveClick: () => {

window.$message.success('确定')

onNegativeClick: () => {

window.$message.error('不确定')

}

})

如果项目所使用ts，window会提示缺少相应定义：这时需要自行定义一个相应的*.d.ts定义文件进行相应的定义，这里以index.d.ts为例：

// 引入naive对应的定义类型

import type { DialogApiInjection } from "naive-ui/lib/dialog/src/DialogProvider";

import type { MessageApiInjection } from "naive-ui/lib/message/src/MessageProvider";

declare global {

interface Window {

$message: MessageApiInjection;

$dialog: DialogApiInjection;

}

此时就能享受ts的快感了：

附上相关项目github地址：vue3-ts-admin-demo

金钥匙