前言

适用于elment-ui 2.15.7 封装消息弹窗，便于生产环境直接调用，提高开发效率

1. 创建 messageUtils.js

/**
 * 消息提示工具类
 * lqd
 */
import {Message, MessageBox, Notification} from 'element-ui'

export default {
    /**
     * 消息确认框
     * type: success/warning/info/error
     */
    openConfirm: (msg, type, okCallback, errCallback) => {
        MessageBox.confirm(msg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: type
        }).then(() => {
            // eslint-disable-next-line standard/no-callback-literal
            okCallback()
        }).catch(() => {
            // eslint-disable-next-line standard/no-callback-literal
            errCallback()
        })
    },
    /**
     * 消息弹窗
     * type: success/warning/info/error
     */
    message(msg, type, duration) {
        Message({
            message: msg,
            type: type || 'success',
            duration: duration || 1000
        })
    },
    /**
     * 消息通知框
     * type: success/warning/info/error
     */
    notice(msg, type, duration) {
        Notification(
            {
                title: '消息',
                message: msg,
                type: type || 'success',
                duration: duration || 2000
            }
        )
    }
}

2. 使用示例

import messageUtils from '../../utils/messageUtils'

export default {
  name: '',
  data () {
    return {}
  },
  methods: {
    test () {
        // 成功通知
      messageUtils.notice('操作成功！')
      // 失败通知
      messageUtils.notice('操作失败！', 'error')
      // 失败通知  延时3秒
      messageUtils.notice('操作失败！', 'error', 3000)

      // 成功提示
      messageUtils.message('操作成功！')
      // 失败提示
      messageUtils.message('操作失败！', 'error')
      // 失败提示  延时3秒
      messageUtils.message('操作失败！', 'error', 3000)
      
      // 消息确认框
      messageUtils.openConfirm('确定删除吗？', 'warning', () => {
        console.log('操作成功！')
      })
    }
  }
}