【Ant Design Vue】Notification/Message没有反应、$notification/$message undefined 已解决
先上官方文档:Ant Design Vue Notification(通知提醒框)光把官方文档里的代码粘贴过来是无法直接使用的,这里的处理方式和使用Ant Design Vue的普通组件也不一样,需要在Vue的原型链中增加notification属性,这样在其他组件中才可以通过$notification使用。在main.js中修改Vue原型链:import Vue from 'vue'import
·
先上官方文档:Ant Design Vue Notification(通知提醒框)
光把官方文档里的代码粘贴过来是无法直接使用的,这里的处理方式和使用Ant Design Vue的普通组件也不一样,需要在Vue的原型链中增加notification属性,这样在其他组件中才可以通过$notification使用。
在main.js中修改Vue原型链:
import Vue from 'vue'
import App from './App'
//从Ant Design Vue导入notification,注意首字母小写
import { notification } from 'ant-design-vue'
//notification的全局配置方法
notification.config({
duration: 2
});
//在Vue的原型链中增加notification属性
Vue.prototype.$notification = notification;
new Vue({
render: h => h(App),
}).$mount('#app')
在其他组件中使用:
methods: {
openNotificationWithIcon(type, title, content) {
this.$notification[type]({
message: title,
description: content
});
}
}
this.openNotificationWithIcon('success', '登录成功', '正在跳转至首页')
this.openNotificationWithIcon('error', '登录失败', '用户名或密码错误')
当然,不是一定要在main.js中进行操作。个人习惯用一个js文件专门注册项目中需要使用的Ant Design Vue组件,所以就把这部分代码也放在那个文件里了,在main.js中引入就行。
另外,Ant Design Vue Message(全局提示)的使用方法和Notification很相似,也是要在Vue的原型链中增加message属性,然后通过$message使用,不再赘述。
更多推荐
已为社区贡献1条内容
所有评论(0)