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

记一下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('删除成功') ... } }, ... }# 示例效果 ---来自腾讯云社区的---薛定喵君