element中仿$confirm 确认框

最新推荐文章于 2024-08-22 11:52:08 发布

想你的风吹到了瑞士

最新推荐文章于 2024-08-22 11:52:08 发布

阅读量5.3k

点赞数 5

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_36617251/article/details/112585426

版权

本文探讨了在Vue项目中如何实现一个自定义的确认框组件，以满足特定需求。作者详细介绍了从在单组件内部实现确认框，到如何通过Vue.extend()方法抽取公共部分，以实现组件复用。此外，还解释了为何选择Vue.extend()，以及如何结合Promise来优雅地处理回调。最后，给出了代码实现和使用示例。

摘要由CSDN通过智能技术生成

前端交互中经常使用确认框。在删除、修改等操作时，调用后端接口之前，先跳出弹框显示提示信息，提示用户确认，避免用户误操作。
项目中全局引入了Element UI，提供了一套模态对话框组件，用于消息提示、确认消息、提交内容，使用起来也非常简便。
（什么是“模态”？可将其理解为：特定条件触发之后产生的）

以下来自于element官网文档：

如果你完整引入了 Element，它会为Vue.prototype添加如下全局方法： $msgbox, $alert, $confirm 和$prompt。因此在Vue instance中可以采用本页面中的方式调用 MessageBox。

代码范例：

 
 this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.$message({ type: "success", message: "删除成功!" });
                    })
                    .catch(() => {
                        this.$message({ type: "info", message: "已取消删除" });
                    });

Element允许复写样式，如果全局都需要，则可以进行写在全局自定义样式单中，覆盖掉原有样式。
当Element提供的默认组件不能满足需求时，需要思考一下如何实现？