vue项目element-ui消息提示框及确认弹框封装
【摘要】
记一下element-ui消息提示框及确认弹框的封装
utils下新建封装文件页面vue文件中引用示例效果
# utils下新建封装文件
src/utils/confirm.js
import { MessageBox, Message } from "element-ui"; /** * @author 封装 element-ui 弹框 *...
记一下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('删除成功')
-
...
-
}
-
},
-
...
-
}
# 示例效果
文章来源: blog.csdn.net，作者：薛定喵君，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/jsxg2009/article/details/115244503
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）