第一种:
//main.ts
import { createApp } from 'vue';
import App from './App';
import Antd,{ message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';
const app = createApp(App);
app.use(Antd);
// 在定义app的原型上用provide进行挂载
app.provide('message', message);
// xxx.vue
import { inject } from 'vue';
const msg: any = inject('message');
const cancel = () => {
msg.info('已取消');
};
第二种:
//main.ts
import { createApp } from 'vue';
import App from './App';
import Antd,{ message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';
const app = createApp(App);
app.use(Antd);
app.config.globalProperties.$message = message;
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const cancel = () => {
proxy.$message.info('已取消');
};
关于message消息提示全局配置,vue3中第二种方式可能后续就会失效,建议使用官方推荐的第一种方式注入,provide和inject搭配简直无敌,使用vite+ts+vue3项目,unplugin-vue-components插件无法处理非组件模块,如 message、Modal、notification、Icon等,这种组件需要手动加载,都可以使用这种方式解决,祝大家好运,共勉!