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

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

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

  • 当确定和取消按钮的业务逻辑不一致时，我们将取消(点击右上角的x)的逻辑写在before-close的方法中
  • 当确定和取消按钮的业务逻辑一致时，我们将取消(点击右上角的x)的逻辑可以写在close方法中
Note_creek
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹窗，最小化和最大化
11-22
首先，"弹窗"是一种在用户交互时突然出现的小窗口，通常用于显示通知、询问或者提供额外的操作选项。在Web开发中，弹窗常用于创建模态对话框，阻止用户在完成特定操作之前与主页面的交互。基于iframe的弹窗工具允许...
vue-manage-system.rar
03-11
`el-dialog`用于弹窗交互，`el-form`和`el-form-item`用于表单设计，`el-upload`则方便了文件上传，特别是批量导出Excel的功能。 批量导出Excel是企业管理平台中常见的一项需求，Vue Manage System通过集成第三方库...
4种方案教你彻底解决vue + el-dialog的model的状态已经改变但是却不显示弹窗,×号点击后异常无法显示弹框
tangdou369098655的博客
02-22 2024
如果你是VUE2.X，请检查你是否在:visible这个属性上加.sync，就像这样:visible.sync=“dialogVisble”，vue3应该是v-model的绑定方式，请去查文档~如果方案1没有解决，可以尝试将x号绑定和取消一样的方法来进行关闭。找到元素，手动在dom里面把mask的display改成show。欢迎大家指出文章需要改正之处~
vue+elementui el-dialog 子组件 右上角关闭和按钮关闭
m0_65274248的博客
10-09 8193
vue+elementui el-dialog 子组件 右上角关闭和按钮关闭
elementUI dialog 组件二次封装 before-close 回调函数作用
最新发布
qq_37309987的博客
05-30 424
2、封装 dialog 组件为 baseDialog，子组件是一个 baseDialog+form 格式，将组件封装为 baseDialogForm，页面中使用 baseDialogForm。before-close 弹框关闭前的回调函数，父组件可以向子组件传递一个函数，用于修改子组件内的变量变量。1、封装 dialog 组件为 baseDialog，页面中使用 baseDialog 组件。场景2：将 baseDialog+form 封装为 baseDialogForm 组件。
element-ui dialog 鼠标误点关闭或关闭前弹窗提示
liuchenhaoy的博客
10-20 849
element-ui dialog 鼠标误点关闭或关闭前弹窗提示
el-dialog 点击X关闭弹框调用取消事件
weixin_57953310的博客
06-25 1518
事件： const handleClose = (done: () => void) => { done()}属性： :before-close="handleClose"
dialog =＞ :before-close的属性应用
qq_59076775的博客
08-01 1763
这里有个错误观点,只要点击X号的时候会触发before-close这个属性,并不是检测到弹窗关闭的时候触发这个属性。before-close属性是点击X号之后进行的逻辑处理,并不是检测到弹窗关闭后的逻辑处理。在element-ui里面关闭弹窗的时候before-close会触发。before-close捕捉关闭弹窗的动作，发现控制台并没有什么动作。也就是点击X的时候回触发before-close这个属性,因此我们通常在写代码的时候,写上这一行代码。等到全局验证成功后,等到。
关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作
niuniu2878499107的博客
03-24 3454
关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
1. **创建组件模板**：首先，需要创建一个新的Vue组件，包含Dialog或Drawer的基本结构，包括标题、内容区域和关闭按钮等元素。 2. **引入Element UI**：确保项目中已正确安装和引入Element UI，以便可以利用其提供...
基于Vue.js+Nuxt开发自定义弹出层组件
10-14
在模板中，可以通过`<v-popup>`标签直接使用组件，设置`v-model`来控制弹出层的显示与隐藏，以及通过属性来配置标题、动画效果、背景遮罩是否可关闭、关闭按钮、按钮列表等。例如： ```html <v-popup v-model=...
考试类精品--考试后台管理(vue-element).zip
02-06
Element UI提供的组件在这样的系统中起到了关键作用，比如使用`el-form`和`el-form-item`构建表单用于数据录入，`el-table`展示数据列表，`el-dialog`弹窗处理确认或编辑操作，`el-pagination`实现分页功能，以及`el...
基于spring boot + element-ui的后台管理系统.zip
08-31
5. **Element-UI组件使用**：在前端页面，可以使用Element-UI的各种组件，如el-table用于展示数据，el-form进行表单处理，el-dialog用于弹窗交互等。 6. **Vue.js的生命周期和状态管理**：Vue.js的组件有自身的生命...
Vue后台管理系统代码、element-ui+axios
08-11
它包含了一系列预先设计和优化的组件，如el-table用于数据展示，el-form处理表单交互，el-dialog用于弹窗提示等，这些都大大简化了后台管理系统的界面开发工作。 动态路由（Dynamic Routing）是Vue Router的一个...
vue+element不前后端分离资源包
06-26
Element UI本身也提供了一些内置的Vue插件，如el-table-column用于扩展表格功能，el-dialog用于弹窗交互等。 在这个不采用前后端分离的项目中，开发可能需要更加注重安全性和性能优化，因为直接的数据交互可能会...
element ui Dialog before-close的使用方法，before-close调用不规则before-close一直调用/执行
李程程的博客
10-12 7580
element ui Dialog before-close的使用方法，before-close调用不规则before-close一直调用/执行
dialog弹窗的用法
qq_59076775的博客
05-17 2555
这是Element-ui下的代码: <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>这是一段信息</span> &lt
dialog 只能点击确认 取消和右上角的叉号才能关闭
weixin_47194802的博客
04-10 1788
官网上有一个方法，在这里面写关闭的事件，另外加:close-on-click-modal="false"，对点击遮盖层无操作。关于弹窗只能点击确认 取消和右上角的叉号才能关闭，点遮罩层不可以关闭~
修改el-dialog弹窗关闭按钮
07-27
根据提供的引用内容，可以看出要修改el-dialog弹窗关闭按钮，可以通过以下步骤实现： 1. 在el-dialog组件中，可以使用:before-close属性来指定在关闭弹窗之前要执行的方法。在这个方法中，可以添加关闭弹窗前的逻辑，比如清空表格内容。\[1\] 2. 在el-dialog组件中，可以使用@close事件来指定在关闭弹窗时要执行的方法。在这个方法中，可以添加关闭弹窗后的逻辑，比如隐藏弹窗。\[1\] 3. 如果想要修改关闭按钮的样式，可以在样式文件中找到.el-dialog__headerbtn类，并设置background属性来修改关闭按钮的背景图。\[2\] 综上所述，要修改el-dialog弹窗关闭按钮，可以在el-dialog组件中添加:before-close属性和@close事件，并在对应的方法中添加相应的逻辑。同时，可以在样式文件中修改.el-dialog__headerbtn类来修改关闭按钮的样式。 #### 引用[.reference_title] - *1* [vue中el-dialog弹窗关闭](https://blog.csdn.net/guo950713/article/details/131063461)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [element-ui中更换el-dialog弹窗中默认的关闭按钮](https://blog.csdn.net/Shivy_/article/details/127861530)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [【前端学习记录】el-dialog弹窗点击确定按钮关闭弹窗时的执行逻辑](https://blog.csdn.net/Note_creek/article/details/129182906)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值