一、封装辅助函数
import { Message, Notification, MessageBox } from 'element-ui';
let currentMessage = null;
let currentMessageBox = null;
let currentNotification = null;
export function elMessage(options){
if (currentMessage) {
currentMessage.close();
}
currentMessage = Message(options);
}
['error', 'success', 'info', 'warning'].forEach((type) => {
elMessage[type] = (options) => {
if (typeof options === 'string') {
options = {
message: options,
};
}
options.type = type;
return elMessage(options);
};
});
export function elMessageBox(config, closeBack) {
if (currentMessageBox && currentMessageBox.close) {
currentMessageBox.close();
}
currentMessageBox = MessageBox({
...config,
callback() {
if (closeBack) {
closeBack();
}
currentMessageBox = null;
},
});
}
export function elNotification(config, closeBack) {
if (currentNotification && currentNotification.close) {
currentNotification.close();
}
currentNotification = Notification({
...config,
onClose() {
if (closeBack) {
closeBack();
}
currentNotification = null;
},
});
}
二、全局引入
import { elMessage,elMessageBox,elNotification } from '@/utils/el-hint';
import i18n from './lang/index';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, {
size: 'medium',
i18n: (key, value) => i18n.t(key, value)
});
Vue.prototype.$message = elMessage;
Vue.prototype.$elMessageBox = elMessageBox;
Vue.prototype.$elNotification = elNotification;
三、使用
this.$message.success('1111');
this.$elMessageBox({
title:'标题',
message:'111',
showClose:false,
},() => {
});
this.$elNotification({
title:'111',
message:'222',
type:'error'
},() => {
});