为什么头顶越来越秃?
还不是因为客户的要求越来越多!
一个快完成的项目
要求所有的提示框消失时间延长,并且可以手动关闭
这并没有什么
但是100、200个文件里都用到$message
一个一个改要哭哦
但是!
看了Element 文档发现,Element 已经为 Vue.prototype 添加了全局方法 $message
,我们只需要全局重写 $message
即可
简直不要太开心~~
上代码
// custom-$message.js
import ElementUI from 'element-ui';
export default {
install(Vue, options) {
Vue.prototype.$message = function(msg, type) {
ElementUI.Message({
message: msg,
duration: 10000,
showClose: true,
type: type
});
};
Vue.prototype.$message.error = function(msg) {
ElementUI.Message({
message: msg,
duration: 10000,
showClose: true,
type: 'error'
});
};
Vue.prototype.$message.warning = function(msg) {
ElementUI.Message({
message: msg,
duration: 10000,
showClose: true,
type: 'warning'
});
};
Vue.prototype.$message.success = function(msg) {
ElementUI.Message({
message: msg,
duration: 10000,
showClose: true,
type: 'success'
});
};
Vue.prototype.$message.close = function() {
return ElementUI.Message.close();
};
Vue.prototype.$message.closeAll = function() {
return ElementUI.Message.closeAll();
};
}
};
然后main.js中引入就行啦
import ElementUI from 'element-ui';
import message from './custom-$message';
.....
Vue.use(ElementUI);
Vue.use(message);
.....
注意:
Vue.use(message)
要放在Vue.use(ElementUI)
的后面哦!
以上!