【前端学习记录】el-dialog弹窗点击确定按钮关闭弹窗时的执行逻辑

最新推荐文章于 2025-06-05 15:32:02 发布
最新推荐文章于 2025-06-05 15:32:02 发布
阅读量2.8k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 学习 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Note_creek/article/details/129182906

根据element文档可知，当对话框关闭时会执行close方法，我们可以在@close方法中加上对应的处理逻辑。因此在使用时需要注意以下几点：

  • 当确定和取消按钮的业务逻辑不一致时，我们将取消(点击右上角的x)的逻辑写在before-close的方法中
  • 当确定和取消按钮的业务逻辑一致时，我们将取消(点击右上角的x)的逻辑可以写在close方法中
el-dialog仅可通过关闭按钮进行关闭
Aa12364567的博客
03-29 1077
添加 :close-on-click-modal=“false”el-dialog仅可通过关闭按钮进行关闭。
【Vue】el-dialog的2种封装方法（父子组件双向通信），$emit触发父事件/.sync修饰符双向绑定
coderYYY的博客
03-12 696
对el-dialog进行封装是一个不错的选择。本文将介绍两种封装el-dialog的方法：一种是使用$emit触发父组件事件，另一种是使用.sync实现双向绑定。本文介绍了两种封装el-dialog组件的方法：一种是使用$emit触发父组件事件，另一种是使用.sync实现双向绑定。这两种方法各有优缺点，开发者可以根据具体需求选择适合的方法。
vue element UI el-dialog 如何监听右上角 x 关闭按钮
热门推荐
weixin_40841731的博客
10-24 3万+
<el-dialog :before-close="handleDialogClose"> </el-dialog> methods: { /** * 点击 X 关闭对话框的回调 **/ handleDialogClose() { } }      
el-dialog 点击X关闭弹框调用取消事件
weixin_57953310的博客
06-25 2058
事件： const handleClose = (done: () => void) => { done()}属性： :before-close="handleClose"
bug 记录 - 使用 el-dialog 的 before-close 的坑
最新发布
神膘护体小月半的博客
06-05 1296
手动点击关闭按钮，或者点击 model 空白区域时，弹窗被关闭。未执行 form 表单的 resetFields 方法，所以再次打开时，弹窗保留了上次操作的痕迹（form 表单未重置）因此需要监听 dialog 的关闭事件，官方提供了一个方法，before-close。"执行了 beforeCloseDialog"
关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作
niuniu2878499107的博客
03-24 4347
关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作
el-dialog的before-close
ZMJ_QQ的博客
09-14 1万+
element官方文档中 before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。 <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :v
el-dialog 弹窗框确认按钮防抖处理
weixin_44043338的博客
07-18 729
el-dialog 弹窗确认框按钮防抖，防抖时间是根据接口返回时间确定。confirmFun：promise请求函数。debounceMethods：防抖函数。
el-dialog对话框子组件的关闭
Dolores_zsq的博客
05-12 5562
在子组件对话框中 用:before-close关闭对话框，取消按键绑定点击事件。父组件中@close接收子组件传来的“close”事件。子组件把"close"事件传给父组件。
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
修改el-dialog弹窗关闭按钮
07-27
- *3* [【前端学习记录】el-dialog弹窗点击确定按钮关闭弹窗时的执行逻辑](https://blog.youkuaiyun.com/Note_creek/article/details/129182906)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra...
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
1. **创建组件模板**：首先，需要创建一个新的Vue组件，包含Dialog或Drawer的基本结构，包括标题、内容区域和关闭按钮等元素。 2. **引入Element UI**：确保项目中已正确安装和引入Element UI，以便可以利用其提供...
弹窗，最小化和最大化
11-22
首先，"弹窗"是一种在用户交互时突然出现的小窗口，通常用于显示通知、询问或者提供额外的操作选项。在Web开发中，弹窗常用于创建模态对话框，阻止用户在完成特定操作之前与主页面的交互。基于iframe的弹窗工具允许...
关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作（！表单为子组件时）
csdn6107的博客
09-20 4308
关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作（！表单为子组件时）
element-ui dialog 鼠标误点关闭或关闭前弹窗提示
liuchenhaoy的博客
10-20 985
element-ui dialog 鼠标误点关闭或关闭前弹窗提示
Dialog确定和删除按钮
张亚运的专栏
01-19 3033
main.xml代码下： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical
vue+elementui el-dialog 子组件 右上角关闭和按钮关闭
m0_65274248的博客
10-09 8842
vue+elementui el-dialog 子组件 右上角关闭和按钮关闭
elementui的dialog点击右上角关闭按钮关闭dialog
wangaiwen的博客
03-08 4091
elementui的dialog点击右上角关闭按钮关闭dialog
vue中el-dialog弹窗关闭
guo950713的博客
06-06 2638
vue中el-dialog弹窗关闭
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值