Notification和MessageBox封装

1、导入文件

import context from "@/main"; //导入this
import { MessageBox, Notification, Message } from "element-ui";

2、Notification

/**
 * @method Message提示框
 * @param  {String} text  提示框内容
 * @param  {String} type  提示框类型
 * @return {Null}
 */
export function handleCofirm(text = "", type = "") {
  return MessageBox.confirm(text, context.$t("common.tips"), {
    confirmButtonText: context.$t("common.confirm"),
    cancelButtonText: context.$t("common.cancel"),
    type: type,
  });
}

3、MessageBox

/**
 * @method Notify 消息提示框
 * @param  {String} message  提示框内容
 * @param  {String} type  提示框类型
 * @return {Null}
 */
export function Notify(message = "", type = "") {
  // 避免重复点击出现一行提示
  if (Notification) {
    Notification.closeAll();
  }
  if (type === "success") {
    return Notification({
      title: context.$t("common.success"),
      message: message,
      type: type,
      duration: 2000,
    });
  }
  if (type === "warning") {
    return Notification({
      title: context.$t("common.warning"),
      message: message,
      type: type,
      duration: 2000,
    });
  }
  if (type === "error") {
    return Notification({
      title: context.$t("common.error"),
      message: message,
      type: type,
      duration: 2000,
    });
  }
}

4、使用示例

handleCofirm('你好啊！', "warning").then(()=>{
  //代码块
}).catch(() => {
                this.$message({
                    type: "info",
                    message: '取消操作',
                });
            })


Notify('操作成功', "warning");