vue中对element的弹框MessageBox及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'
  })
}

最开始引入全局，在main.js中添加：

import { MessageError, MessageInfo, MessageSuccess, MessageWarning, MessageBoxWarning, MessageBoxSuccess, MessageBoxInfo, MessageBoxError } from '@/utils/validate'

Vue.prototype.$MessageError = MessageError
Vue.prototype.$MessageInfo = MessageInfo
Vue.prototype.$MessageSuccess = MessageSuccess
Vue.prototype.$MessageWarning = MessageWarning
Vue.prototype.$MessageBoxWarning = MessageBoxWarning
Vue.prototype.$MessageBoxSuccess = MessageBoxSuccess
Vue.prototype.$MessageBoxInfo = MessageBoxInfo
Vue.prototype.$MessageBoxError = MessageBoxError

现在我们不这么写了，为了更好的拓展性，在main.js中添加以下两行代码:

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

2、使用方法

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

this.$MessageBox.MessageBoxWarning('此操作将永久删除本次考试, 是否继续?').then(() => {
// 点击确定时执行的方法
   request_post_data(api.baseExam.delete, { examBaseId: this.multipleSelection[0].id }).then(response => {
     if (response.data.success) {
       this.$MessageSuccess('成功删除数据')
       this.getData()
      } else {
       this.$MessageError(response.data.Message)
     }
   })
 }).catch(() => {
// 点击取消时执行方法
   this.$MessageInfo('已取消删除')
 })
}

如果想要将message改成模态窗口，还想要使用遮罩层，可以使用messagebox

export function msgWaring(text = 'Box') {
  MessageBox.confirm(text, '提示', {
    type: 'warning',
    showCancelButton: false,
    showConfirmButton: false
  }).then(() => {
  }).catch(() => {
  })
}

注意一定要加then及catch。否则点击遮罩层的时候会报错

最后编辑于：2019.12.02 08:53:10