Element-ui message confirm Notification的二次封装(消息提示及弹窗)

element-ui已经封装了这些组件，但是有些时候我们使用的时候，往往需要在不同的地方写同样的代码块，所以可以做一个简单的封装，只需要导入并调用即可。可以在项目中减少代码量。

message的封装(消息提示及弹窗)

可以在项目中新建utils包，然后新建message.js，其中的具体代码如下：

import { Message, MessageBox } from 'element-ui'
let messageFunction = {
  me, // 错误
  mi, // 取消
  ms, // 成功
  mw, // 警告
  mbs // 多选
}
export default messageFunction
export function me (text = '错误') {
  Message({
    message: text,
    type: 'error',
    duration: 3 * 1000
  })
}
export function mi (text = '取消') {
  Message({
    message: text,
    type: 'info',
    duration: 3 * 1000
  })
}
export function ms (text = '成功') {
  Message({
    message: text,
    type: 'success',
    duration: 3 * 1000
  })
}
export function mw (text = '警告') {
  Message({
    message: text,
    type: 'warning',
    duration: 3 * 1000
  })
}
export function mbs (text1 = '标题',text2="提示内容", text3 = '成功消息的提示', text4 = '取消消息的提示', others) {
  return MessageBox.confirm(text2, text1, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    Message({
      message: text3,
      type: 'success',
      showClose: true,
      duration: 3 * 1000
    });
    others()
  }).catch(() => {
    Message({
      message: text4,
      type: 'warning',
      showClose: true,
      duration: 3 * 1000
    })
  });
}

message的使用

然后在main.js中引用

这里实在vue.js中，其他的框架差不多

import message from '@/utils/message' //引入弹出消息封装
Vue.prototype.$mb = message

在调用的地方：

this.$mb.me('欢迎回来!')
this.$mb.mbs("提示",`删除当前用户 - ${res.name}`,"删除成功","取消删除",()=>{
         //###
        })
      .catch((err) => {
          //###
});})

notify的封装(通知消息)

import { Notification } from 'element-ui'
let notifys = {
  notify
}
export default notifys
export function notify (title = '标题', text = '内容', type = '类型', position = '消息位置', time = '自动关闭') {
  Notification({
    title: title,
    message: text,
    type: type,         // success,warning,info,error
    position: position, // bottom-right/left,top-right/left
    duration: time      // 0不自动关闭
  })
}

notify的使用

在mian.js引入

import Notification from '@/request/notify' //引入通知消息封装
Vue.prototype.$nty = Notification;

调用：

this.$ntf.notify('通知 ','我们的祖国在强大','success','top-right',3000)

上面的两个组件也可以直接封装在一个js里面，然后在main.js中引入使用，当然你也可以直接在需要的地方import，然后调用其方法。

完整示例

简化版

import { MessageBox, Message } from "element-ui";
import { Notification } from 'element-ui'
/**
 * @author 封装 element-ui 弹框
 * @param text
 * @param type
 * @returns {Promise}
 */
export function handleConfirm(text = "确定执行此操作吗？", type = "danger") {
    return MessageBox.confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: type
    });
}
/**
 * @author 封装 element-ui 消息提示
 * @param text
 * @param type
 * @returns {Promise}
 */
export function handleAlert(text = "操作成功", type = "success",duration= 3) {
    return Message({
        showClose: true,
        message: text,
        center:true,
        type: type,
        duration: duration*1000
    });
}
/**
 * 封装Notify提示组件
 * @param title
 * @param message
 * @param type
 * @returns {*}
 */
export function handleNotify (title = '标题', message = '内容', type = '类型', position = 'top-right', time = '3000') {
    Notification({
        title: title,
        message: message,
        type: type,         // success,warning,info,error
        position: position, // bottom-right/left,top-right/left
        duration: time      // 0不自动关闭
    })
}