Ant-Design-Vue 中的$message全局配置

首先项目中npm方式或者yarn方式安装ant-design-vue：npm install ant-design-vue --save     或    yarn add ant-design-vue；

在main.js文件中配置一下：

import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false;
//注入全局属性$message
import { message} from 'ant-design-vue'
Vue.prototype.$message = message;
message.config({
    duration: 2,// 持续时间
    top:`100px`, // 到页面顶部距离
    maxCount: 3 // 最大显示数, 超过限制时，最早的消息会被自动关闭
});
new Vue({
  render: h => h(App),
}).$mount('#app')

在其他子组件中就可以使用如下方式使用提示框了

     this.$message.success('This is a success message');
  
     this.$message.error('This is an error message');
 
     this.$message.warning('This is a warning message');