vue3版本全局挂载方法不再绑定在vue实例上,这里我们将全局方法绑定在window实例上
首先定义一个组件用来挂载全局方法,名字根据个人喜好定义即可,这里以global.vue
为例:
// global.vue
// 挂载window下方法组件
// 我是全局用路由控制页面,如果有其他嵌套组件布局等,引入相应的替换即可
<template>
<router-view />
</template>
<script lang="ts" setup>
import {
useDialog, useMessage } from "naive-ui";
// 将 dialog & message 实例方法挂载
// $message 和 $dialog 随个人喜好定义名称
// 注意不要太过于简单,以免污染其他全局定义
window.$message = useMessage();
window.$dialog = useDialog();
</script>
修改App.vue
文件,将naive对应所需的n-message-provider
和n-dialog-provider
嵌套,注意如果为按需引入