[JavaScript知识库]vue 对element的弹框Message的二次封装

官网文档 http://element-ui.cn/#/zh-CN/component/message

1、封装
在/utils/validate文件中添加内容如下：

import { Message, MessageBox } from 'element-ui'

let _common = {}

_common = {
  MessageError: MessageError,
  MessageInfo: MessageInfo,
  MessageSuccess: MessageSuccess,
  MessageWarning: MessageWarning,
  MesssageBoxQuestion: MesssageBoxQuestion,
  MessageBoxSuccess: MessageBoxSuccess,
  MessageBoxInfo: MessageBoxInfo,
  MessageBoxError: MessageBoxError
}

export default _common

export function MessageError(text = '错误',) {
  Message({
    message: text,
    type: 'error',
    duration: 3 * 1000
  })
}
export function MessageInfo(text = '取消') {
  Message({
    message: text,
    type: 'info',
    duration: 3 * 1000
  })
}
export function MessageSuccess(text = '成功') {
  Message({
    message: text,
    type: 'success',
    duration: 3 * 1000
  })
}

export function MessageWarning(text = '警告') {
  Message({
    message: text,
    type: 'warning',
    duration: 3 * 1000
  })
}

export function MesssageBoxQuestion(text = 'Box询问') {
  return MessageBox.confirm(text, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
}

export function MessageBoxSuccess(text = 'Box成功') {
  return MessageBox.confirm(text, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'success'
  })
}

export function MessageBoxInfo(text = 'Box取消') {
  return MessageBox.confirm(text, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  })
}

export function MessageBoxError(text = 'Box错误') {
  return MessageBox.confirm(text, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  })
}

//将message改成模态窗口+遮罩层
//注意一定要加then及catch。否则点击遮罩层的时候会报错
export function msgWaring(text = 'Box') {
  MessageBox.confirm(text, '提示', {
    type: 'warning',
    showCancelButton: false,
    showConfirmButton: false
  }).then(() => {
  }).catch(() => {
  })
}

2.在main.js中添加以下两行代码:

import messagebox from '@/utils/validate'
Vue.prototype.$MessageBox = messagebox

3.使用方法

this.$MessageBox.MessageSuccess('成功删除数据')

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读