- 在utils文件创建resetMessage.js
import { Message } from 'element-ui'
let messageInstance = null
const resetMessage = (options) => {
if(messageInstance) {
messageInstance.close()
}
Message.closeAll() //手动关闭所有消息提示实例
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
2、在main.js中导入,并挂载到vue全局对象上
//main.js
//导入
import {message} from '@/utils/resetMessage'
Vue.use(ElementUI)
//挂载
Vue.prototype.$message = message
3、组件内使用
// 引入后
this.$messge.success('操作成功') //elementUI里面的写法
//或者
Message({ // js里面的写法
type: 'success',
duration: 8*1000
})