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

Note_creek Note_creek 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 3k累计阅读 3.1k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄10年
关注
原创 最新推荐文章于 2026-08-05 11:50:48 发布 3k 阅读 AI 写同款· GEO 优化 ›
elementUI dialog 组件二次封装 before-close 回调函数作用 2、封装 dialog 组件为 baseDialog，子组件是一个 baseDialog+form 格式，将组件封装为 baseDialogForm，页面中使用 baseDialogForm。before-close 弹框关闭前的回调函数，父组件可以向子组件传递一个函数，用于修改子组件内的变量变量。1、封装 dialog 组件为 baseDialog，页面中使用 baseDialog 组件。场景2：将 baseDialog+form 封装为 baseDialogForm 组件。 阅读详情

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

  • 当确定和取消按钮的业务逻辑不一致时，我们将取消(点击右上角的x)的逻辑写在before-close的方法中
  • 当确定和取消按钮的业务逻辑一致时，我们将取消(点击右上角的x)的逻辑可以写在close方法中
收录于
前端

当前文章被收录于：

前端
26 篇文章 1 人学习
订阅专栏 查看详情
标签
#学习 #前端 #vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
破解前端渲染：Selenium与Playwright浏览器自动化实战对比 在Web开发与数据抓取领域，客户端渲染（CSR）已成为现代前端框架（如React、Vue）的主流技术。其原理在于浏览器先加载基础HTML框架，再通过JavaScript异步请求数据并动态生成页面内容。这种技术虽然提升了用户体验，却给传统基于HTTP请求的爬虫带来了挑战——无法直接获取动态渲染的数据。为此，浏览器自动化工具应运而生，通过模拟真实浏览器环境执行JavaScript，完整渲染页面后提取数据，在数据采集、自动化测试等场景中极具价值。本文聚焦于两大主流工具Selenium与Playwright，深入对 阅读详情

相关推荐

Playwright同步模式实战：5大高频方法解决90%网页自动化需求

网页自动化是软件测试、数据抓取和流程自动化中的关键技术，其核心原理是通过程序模拟用户操作浏览器。在众多工具中，Playwright以其跨浏览器支持和强大的API脱颖而出。对于需要快速集成、避免异步复杂性的场景，其同步模式提供了独特的技术价值，它允许开发者使用熟悉的同步编程思维处理动态页面、文件操作和网络拦截。在数据抓取、表单填写、批量操作等应用场景中，同步API能显著降低心智负担和调试难度。本文将聚焦Playwright同步模式下的**智能等待**与**网络请求拦截**等核心高频方法，通过实战代码解析如何高

weixin_34375251的博客 365

el-dialog的before-close

element官方文档中 before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。 <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :v

ZMJ_QQ的博客 1万+

Angular+Leaflet弹窗服务：解耦动态Popup内容与数据流

在Web GIS开发中，地图标记弹窗（Popup）是核心交互组件，其本质是动态内容渲染与异步数据绑定的结合体。传统bindPopup仅支持静态HTML，难以应对实时车辆状态、设备温度曲线、轨迹图表等复杂业务需求；而直接使用动态组件易引发内存泄漏与变更检测性能瓶颈。基于Angular的TemplateRef与Service协同机制，可实现弹窗模板声明式定义、数据快照缓存、加载/错误/内容三态管理及样式安全穿透，既复用Angular生命周期与响应式能力，又兼容Leaflet原生DOM结构。本方案特别适用于物流调

cri5768的博客 535

vue+elementui el-dialog 子组件 右上角关闭和按钮关闭

vue+elementui el-dialog 子组件 右上角关闭和按钮关闭

m0_65274248的博客 9105

Java浏览器自动化利器Jvppeteer：原理、对比与实战指南

浏览器自动化是现代软件开发中的关键技术，它通过程序控制浏览器行为，实现网页交互模拟。其核心原理基于浏览器提供的远程调试协议，如Chrome DevTools Protocol（CDP），允许外部工具与浏览器实例进行通信。这项技术的价值在于能够精准模拟用户操作，处理动态渲染内容，广泛应用于自动化测试、数据采集和性能监控等场景。在Java生态中，Jvppeteer作为基于Puppeteer的解决方案，通过CDP协议直接控制Chrome浏览器，提供了比传统Selenium更底层的控制能力和更优的性能表现。它特别适

weixin_34280237的博客 484

Playwright实战：从环境配置到高级调试的免费解决方案

自动化测试和网页抓取是现代软件开发中的关键技术，它们通过模拟用户操作来验证功能、提升效率。其核心原理在于控制浏览器执行预设脚本，实现端到端的验证或数据采集。这项技术的价值在于确保软件质量、加速回归测试，并广泛应用于Web应用测试、数据爬取和流程自动化等场景。在实际应用中，开发者常面临环境配置、元素定位和脚本稳定性等挑战。本文聚焦于Playwright这一主流工具，针对**环境与安装**中的浏览器下载慢、版本冲突问题，以及**脚本编写与执行**中的元素定位失败、弹窗处理等高频痛点，提供经过实战检验的解决方案，

weixin_34314962的博客 378

el-dialog打开与关闭的几种方式

欢迎大家来到我的博客，请各位看客们点赞、收藏、关注三连！欢迎大家关注我的知识库，Java之从零开始·语雀你的关注就是我前进的动力！优快云专注于问题解决的博客记录，语雀专注于知识的收集与汇总，包括分享前沿技术。 ​父组件 子组件 第二种 ref 父组件 this.refs.dialog.visible=true;在兄弟组件中this.refs.dialog.visible = true; 在兄弟组件中 this.refs.dialog.visible=true;在兄弟组件中this.parent.$refs

hikktn的博客 1万+

从Selenium迁移到Playwright：现代浏览器自动化的架构优势与实战指南

浏览器自动化是现代软件开发和测试中的一项关键技术，它通过程序控制浏览器行为，模拟真实用户操作。其核心原理在于通过特定的通信协议与浏览器引擎交互，发送指令并获取页面状态。这项技术的价值在于能够实现高效的UI自动化测试、数据抓取以及流程自动化，显著提升开发与测试效率，广泛应用于Web应用测试、爬虫开发和RPA（机器人流程自动化）等领域。在众多自动化工具中，Selenium曾长期占据主导地位，但近年来，基于更现代架构的Playwright凭借其卓越的稳定性和丰富的原生功能，正成为处理复杂单页应用（SPA）和动态内

weixin_34224941的博客 375

vue-element记录整理

一、修改弹窗层-title 1. 定义一个变量 dailogTitleType <el-dialog :title="dailogTitleType+'图片'" :visible.sync="dialogVisible" width="500px" ></el-dialog> 2. 返回一个空的变量 export default { data() { return { dialogTitleType:'' } } } 3. 在对应按钮的oncl

在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖 156

使用jQuery实现带有关闭按钮的对话框右上角菜单

在Web开发中，对话框（dialog）是一种常见的交互组件，用于显示提示、警告或其他重要信息。这是一个简单的示例，你可以根据自己的需求自定义对话框的样式和功能。通过使用jQuery库，我们可以轻松地实现对话框右上角菜单，并为用户提供良好的交互体验。现在，我们将使用jQuery来实现对话框的显示和关闭功能。现在，当用户点击"打开对话框"按钮时，对话框将显示出来。用户可以点击右上角的关闭按钮来关闭对话框。在CSS中，我们可以使用一些样式来设置对话框的外观。最后，我们需要在页面中添加一个打开对话框的按钮。

TechNovaX的博客 289

前端相关知识

vue

星光不负赶路人~ 1457

【前端】项目中遇到的问题汇总（长期更新）

【长期更新】前端项目中常遇到的问题汇总（vue3+elementPlus+node.js+axios+webpack）

sinat_39394862的博客 1238

STM32 SAI接口TDM模式实战：8通道音频采集系统搭建全流程（附DMA配置代码）

本文详细介绍了基于STM32 SAI接口TDM模式搭建8通道音频采集系统的全流程。内容涵盖硬件连接设计、CubeMX时钟树与SAI外设的详细配置，并重点解析了TDM模式的核心代码实现与DMA双缓冲机制，提供了完整的配置代码和常见时序问题排查指南，助力开发者高效实现多通道音频传输与处理。

weixin_29192211的博客 505

前端面试锦集

基本面试： 做过最满意的项目是什么？项目背景？为什么要做这件事情？最终达到什么效果？你处于什么样的角色，起到了什么方面的作用？在项目中遇到什么技术问题？具体是如何解决的？ 如果再做这个项目，你会在哪些方面进行改善？ 基础扎实： IT行业,哪些发展好的同学都是具备扎实基础知识，如果理解计算机基础会更好，因为我们面临很多非前端计算问题的。 主动思考： 被动完成任务成长会很慢的，需要有自己的想法，而不是仅仅是完成任务的。 自动学习: 前端领域知识淘汰速度很快，需要经常学习新知识。 追溯深度: 遇到问题是多研究背.

Front小思的博客 6724

相机标定-张正友棋盘格标定法

(X，Y，Z)为在世界坐标系下一点的物理坐标 ( u , v ) 为该点对应的在像素坐标系下的像素坐标 引入齐次坐标的原因：引入齐次坐标的目的是为了升维，将坐标从二维坐标变为三维坐标。 2.相机成像过程 相机成像系统中，共包含四个坐标系：世界坐标系、相机坐标系、图像坐标系、像素坐标系。 （1）世界坐标系（,,） 描述目标在真实世界中的位置引入的参考坐标系。 （2）相机坐标系（,,） ...

qq_41275123的博客 1万+

【嵌入式笔试题】C语言笔试题（4）

嵌入式C语言综合笔试题

m0_74055118的博客 1067

jQuery UI五大核心组件实战：draggable、sortable、datepicker等深度解析

jQuery UI作为经典前端UI库，其 draggable、sortable、datepicker 等组件虽诞生于框架早期，却深刻封装了DOM交互的本质协议——包括拖拽坐标归一化、排序数据一致性、时区敏感的日期解析、动态内容加载与模态框焦点囚笼。这些能力直指现代前端开发中仍普遍存在的兼容性、可访问性与跨浏览器稳定性问题。理解其原理，不仅有助于维护海量存量中后台系统（尤其政务、金融类IE11兼容场景），更能反哺对Vue/React中v-model、useDraggable等抽象层的底层认知。本文聚焦真实项目

a6t2007的博客 508

别再对着数据手册发愁了！用HFSS 2023 R2搞定ESP32-C3板载天线的阻抗匹配

本文详细介绍了如何利用HFSS 2023 R2进行ESP32-C3板载天线的阻抗匹配优化，解决实际PCB设计中常见的性能偏差问题。通过智能模型导入、科学参数扫描和量化优化流程，显著提升天线性能，适用于WIFI和蓝牙应用场景。

weixin_42523543的博客 447

Playwright高效页面交互技巧：智能等待、精准定位与性能优化实战

在现代Web自动化测试与爬虫开发中，页面交互的稳定性和效率是核心挑战。其原理在于浏览器环境的动态性与异步加载特性，要求自动化工具不仅能模拟用户操作，还需智能应对网络延迟、元素状态变化等现实问题。Playwright作为新一代浏览器自动化框架，通过内置的智能等待机制、强大的Locator定位系统以及资源拦截等高级功能，为开发者提供了解决这些难题的技术方案。这些技术显著提升了自动化脚本的健壮性和执行效率，在Web应用测试、数据采集、UI自动化等场景中具有重要价值。本文聚焦于Playwright的高级交互技巧，特

weixin_33716941的博客 373

别再手动挂载NPU了！手把手教你用Ascend-Docker-Runtime一键启动昇腾AI容器

本文详细介绍了如何使用Ascend-Docker-Runtime一键启动昇腾AI容器，大幅简化NPU设备挂载流程。通过环境变量ASCEND_VISIBLE_DEVICES，开发者可以灵活指定NPU设备，提升开发效率。文章还提供了安装配置指南、高级使用技巧和常见问题排查方法，帮助开发者快速掌握这一高效工具。

weixin_42662605的博客 252

从DDPM到DDIM：深入解读《Denoising Diffusion Implicit Models》

DDIM发表在ICRL2021上，是DDPM重要的改进之一，能显著提高DDPM的样本质量、减少采样时间，并且能显式控制插值，已经被广泛应用到现在的Diffusion Models上。这篇博客和大家一起详细解读一下DDIM，认识这一伟大的模型。.........

沉迷单车的追风少年 1万+

首个Vue3项目边写边学边记

本文摘要记录了Vue3+ElementPlus项目开发中的常见问题及解决方案，涵盖四个技术方向： HTML篇：重点解决图片加载状态、文件选择操作和按钮禁用问题。针对img标签的loading状态，推荐使用v-loading指令包裹div容器；文件选择建议采用HTML5的webkitdirectory属性或Electron方案；按钮禁用状态需注意变量逻辑和响应式处理。 TypeScript篇：深入解析void函数返回值、Promise.finally用法，以及接口参数校验、错误类型处理等核心问题。

Mr.小灰狼_随笔 244

【保姆级教程】基于UNet++&MobileNetv2的语义分割模型从训练到RK3588部署：让边缘AI落地效率提升300%

通过SMP库一键构建encoder_name="mobilenet_v2", # 选择MobileNetv2作为骨干encoder_weights="imagenet", # 加载预训练权重加速收敛in_channels=3, # 输入图像通道数（RGB）classes=29, # Cityscapes数据集类别数activation=None # 输出无激活，便于后续损失计算本教程从“模型设计-训练-转换-边缘部署”全链路拆解了。

FJN110的博客 210

Java浏览器自动化实战：Jvppeteer核心原理与应用指南

浏览器自动化是现代Web开发和数据采集中的关键技术，它通过模拟真实用户操作来解决动态页面渲染和交互问题。其核心原理基于Chrome DevTools Protocol（CDP），这是一种允许外部程序与浏览器内核进行底层通信的协议。在技术实现上，CDP将浏览器功能抽象为可编程接口，使得开发者能够远程控制页面导航、元素操作、JavaScript执行等行为。这一技术为自动化测试、数据抓取和页面监控等场景提供了强大支持，尤其适合处理单页应用（SPA）和复杂用户交互。在Java生态中，Jvppeteer作为Puppe

weixin_34101229的博客 551

基于大语言模型的多轮对话系统优化研究

基于大语言模型的多轮对话系统优化研究 摘要 本研究针对大语言模型在多轮对话场景中的性能衰减问题，提出了一套系统优化方案。通过分层存储架构(短期记忆层、中期摘要层、长期知识层)和混合检索策略优化上下文管理，设计动态槽位填充框架增强对话状态跟踪，引入熵引导的重置算法改进生成策略，并采用双路径加载架构突破I/O瓶颈。实验表明，该方案使任务完成率提升28.6%，响应一致性提高41.2%，推理延迟降低35.8%，为构建高性能智能对话系统提供了实用技术路径。 关键词：大语言模型；多轮对话；上下文管理；状态跟踪~~~~~

huanghm88的专栏 663

Camera2Demo

在Camera2 的基础上进行封装，使得Camera2一堆初始化逻辑与Activity分离，降低耦合度，完成预览拍照并保存的操作

ElementUI入门指南：基于Vue.js的组件库快速搭建后台管理系统

在前端开发领域，组件化是提升开发效率的核心思想，它通过封装可复用的UI单元，将开发模式从“从零创造”转变为“配置组装”。基于Vue.js的ElementUI正是这一思想的杰出实践，它提供了一套开箱即用、设计一致的桌面端组件库。其技术价值在于极大降低了实现复杂交互界面的门槛，让开发者能通过声明式配置快速构建功能完善、风格统一的企业级应用，尤其适用于需要快速迭代的中后台管理系统、数据监控平台等场景。通过深度集成Vue的响应式系统，ElementUI实现了数据与视图的无缝绑定，而其“配置大于编码”的理念，使得开发

weixin_30645617的博客 378

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。
上一篇： 【前端学习记录】router在新打开的页面跳转
下一篇： 【前端学习记录】如何在div中保持文本的格式（如换行、空格等）
点赞 0
评论 0
书签 书签 1
Note_creek
Note_creek
博客等级 码龄10年 372粉丝 53原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值