首先项目中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');