Ant-Design-Vue $nitication与$message全局配置

使用ant里这两个组件需要进行全局配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;
//注入全局属性$message
import { message,notification } from 'ant-design-vue'
Vue.prototype.$message = message;
Vue.prototype.$notification = notification;
message.config({
    duration: 2,
});
new Vue({
  render: h => h(App),
}).$mount('#app')

null

在Main.js，在Vue的原型链增加这两个属性。在其他子组件里就可以通过$引用了。

1
2
3
4
5
6
7
8
9
10
this.$message.info("提交完成！")

 this.$notification.open({
                    message: '这是一条通知!',
                    description: '这是描述内容！.',
                    icon: <a-icon type="smile" style="color: #108ee9"/>,
                    onClick: () => {
                        console.log('你点击了通知');
                    },
                });

null