记一下element-ui消息提示框及确认弹框的封装
# 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('删除成功')
...
}
},
...
}