ant design vue3中引入message消息提示,全局引入亲测有效
2023-12-23 06:15:40
两种方式
第一种:使用provide和inject方式
第二种:使用全局挂载$message方式
第一种:
//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等,这种组件需要手动加载,都可以使用这种方式解决,祝大家好运,共勉!
文章来源:https://blog.csdn.net/m0_68633804/article/details/135154957
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!