单独一个文件重写message
import { Message } from 'element-ui'
let messageInstance = null
const resetMessage = (options) => {
if (messageInstance) {
messageInstance.close()
}
messageInstance = Message(options)
};
['error', 'success', 'info', 'warning'].forEach(type => {
resetMessage[type] = options => {
if (typeof options === 'string') {
options = {
message: options
}
}
options.type = type
return resetMessage(options)
}
})
export const message = resetMessage
在使用message地方引入这个被重写了的message,即可实现调用,在此封装全局错误提示:
import { message } from '@/assets/js/resetMessage'
// 错误消息提示
export function elErrorMessage (msg) {
message.error({
message: msg,
duration: _messageTime
//duration默认为3秒
})
//或者
message({type: 'error',message: '提示内容',duration: _messageTime});
}
组件内使用:
import { elErrorMessage } from '@/utils/functions'
elErrorMessage (res.msg)
或者直接在main.js里面挂载在vue上
// 引入ElementUi组件
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from "element-ui";
Vue.use(ElementUI);
import { Message } from 'element-ui'
let messageInstance = null
const resetMessage = (options) => {
if (messageInstance) {
messageInstance.close()
}
messageInstance = Message(options)
};
['error', 'success', 'info', 'warning'].forEach(type => {
resetMessage[type] = options => {
if (typeof options === 'string') {
options = {
message: options
}
}
options.type = type
return resetMessage(options)
}
})
Vue.prototype.$message = resetMessage;
组件内使用:
this.$message.error('提示内容');
this.$message({type:'error',message:'提示内容'});