vue2 确认框 MessageBox 弹框删除确认取消

项目需要删除时弹出确认框需求是项目完成80%时提出的再添加弹出框的话耗时耗力所于是就有了封装好的弹窗函数挂载到Vue的原型上在项目里面可以直接 this. 调用显著提升摸鱼时间话不多说看代码

第一步 在 utils 创建一个名叫 MessageBox.js 的文件把代发复制进去
↓↓↓ 代码 ↓↓↓

/************************** @MessageBox { true } : 引入element的弹出框* @confirmButtonText { true } : 确认按钮显示文字 ( 可更改 )* @cancelButtonText { true } : 取消按钮显示文字 ( 可更改 )* @外比巴卜 { false } : 确认返回 true , 取消返回 false , 方便进项下一步操作************************/import { MessageBox } from "element-ui";
export const box = () => {return MessageBox.confirm("此操作不可撤回，是否继续？", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => true).catch(() => false);
};

第二部 把它在 main.js 中引入
↓↓↓ 代码 ↓↓↓

import Vue from "vue";
import App from "./App.vue";//在这里引入 并挂载到Vue原型上
import { box } from "./utils/messageBox";
Vue.prototype._box = box;

第三部 食用环节
↓↓↓ 代码 ↓↓↓

<template><el-button @click="del_product"></el-button>
</template><script>
export default {methods: {async del_product() {if (!(await this._box())) return;},},
};
</script><style></style>

这样就大功告成了
返回的布尔值判断是否执行 return 跳出函数

vue2 确认框 MessageBox 弹框删除确认取消相关推荐

删除提示框 MessageBox弹框
当删除table表格中的一条数据时,需要给与确认删除提示如下: 可使用 element-ui中的MessageBox弹框.如下代码 handleDelete(index, row) {this.$co ...
MessageBox弹框写删除功能
//使用作用域插槽获取表格 <template slot-scope="scope"><el-button @click=& ...
java弹窗触发事件_关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法...
好久没见了在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法...
好久没见了在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
Xcode Cocoa程序MessageBox 弹框
相信很多Windows程序员都习惯MessageBox弹框提示, 在MacOS下也有类似MessageBox这种弹框提示方法第一种方法 //其他的各种弹框类型NSAlert *alert = [[N ...
关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法参考文章: (1)关于ElementUI中MessageBox弹框的取消键盘触发 ...
VB.net MessageBox弹出的确认对话框点击确定按钮
VB.net MessageBox弹出的确认对话框点击vb.net教程确定按钮 Dim dr As DialogResult = MessageBox.Show("XX", &qu ...
常用UI模板，loading框，提醒框，弹框确认框
css部分 #public_box{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:rgba(0,0 ...
html c 中messagebox,Element-Ui组件 MessageBox 弹框
基础用法消息提示弹框 ``` 点击打开 Message Boxexportdefault{ methods: { open() {this.$alert('这是一段内容','标题名称 ...
ElementUI MessageBox 弹框
一.概述在执行删除操作时,我们一般会添加一个删除确认框,当用户点击确认删除后在执行删除操作,这样能提升用用户体验, 那么该如何快速实现呢?element中提供了相应的确认框,在官方文档中不太好找,其 ...

vue2 确认框 MessageBox 弹框删除确认取消

vue2 确认框 MessageBox 弹框删除确认取消相关推荐

最新文章

热门文章

vue2 确认框 MessageBox 弹框 删除确认取消

vue2 确认框 MessageBox 弹框 删除确认取消相关推荐

最新文章

热门文章

vue2 确认框 MessageBox 弹框删除确认取消

vue2 确认框 MessageBox 弹框删除确认取消相关推荐