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('刪除成功')        ...      }    },    ...  }

# 示例效果