vue，再封装 element MessageBox 弹框

element 中 MessageBox 已经是封装好了的。但是根据实际项目中的需要，弹框的类型肯定是不止一种的。
这里以 MessageBox 中的 confirm 为例。

@util/alert.js 中

import ElementUI from "element-ui";//这里是引入 element 
/**
 * Alert 包含确认和取消按钮的,callback回去确定按钮事件
 * @param content 弹框中提示的内容
 * @param callback 点击确认后返回的函数
 * @param customClass 自定义的整个弹框的类，具体根据项目需要修改css 不做赘述
 * @param btnText 确认按钮，很多情况下确认按钮都需要有单独的文案。同理还可以增加取消按钮的文案。
 * @returns {Promise<MessageBoxData>} 
 */
export const alertConfirmReminder = function (content, callback, customClass, btnText) {
  ElementUI.MessageBox.confirm(content,
      "温馨提示", {
      // 下面为 MessageBox 的配置项 可以根据项目需要修改。
        customClass: `m-msg-box ${customClass?customClass:''}`,// 这里主要是对弹框的大小和字体做修改，根据实际项目自己修改css
        confirmButtonText: btnText ? btnText : "确定",
        cancelButtonText: "取消",
        center: true,
      }).then(() => {
      callback()
    })
    .catch(() => {});
};

如在页面中调用

// 用户登出 功能
import { alertConfirmReminder } from "@/util/alert";
import request from "@/router/axios";
export default {
	methods: {
		userLogoutConfirm() {
		    let _this = this;//这里必须要先赋值this。在alertConfirmReminder 内部，this 会指向 alert.js 中的 函数上。
		    alertConfirmReminder("是否确认退出？", function () {
		        request({
		            url: "/auth/token/logout",
		            method: "delete"
		        })
		            .then((res) => {
		            // 你需要做的其他操作，如清理缓存等等	                
		               console.log("登出成功")
		               _this.$router.push({ path: `/login` });// 跳转到登录页
		            })
		            .catch((err) => {
		                console.log(err);
		            });
		    }, "退出");
		}
	}
}

这样在页面上就会出现一个提示是否退出登录的弹框，点击‘取消’则弹框关闭，点击‘退出’则退出登录。

这是对.MessageBox.confirm的修改。同样的可以对alert 修改。