vue项目element-ui消息提示框及确认弹框封装

• 2020 年 4 月 8 日
• 筆記

记一下element-ui消息提示框及确认弹框的封装

• utils下新建封装文件
• 页面vue文件中引用
• 示例效果

# utils下新建封装文件

src/utils/confirm.js

import { MessageBox, Message } 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") {    return Message({      showClose: true,      message: text,      type: type    });  }

# 页面vue文件中引用

import { handleConfirm, handleAlert } from '@/utils/confirm'  export default {    data() {      return {        ...      };    },    methods: {      ...      handleClose(formName) {        handleConfirm('系统将不会保存您所做的更改，确定要离开吗？').then(res => {          ...        }).catch(err => {          console.log('err', err)        })      },      delConfirm(formName) {        ...        handleAlert('删除成功')        ...      }    },    ...  }

# 示例效果