解决vue+el使用this.$confirm,不能阻断代码往下执行

无人机航拍实战:如何用Python代码精准计算目标地理坐标(附完整代码) 本文详细介绍了如何利用Python代码实现无人机航拍图像中目标点的精准地理位置计算。通过解析从像素坐标系到WGS84大地坐标系的完整转换链条,结合相机内参、无人机姿态与地球曲率处理,提供了可直接运行的实战代码,并重点分析了地理位置计算中的常见误差来源与应对策略,助力开发者解决实际项目中的定位漂移问题。 阅读详情
AI摘要

在Vue+ElementUI框架中,通过await优化this.$confirm弹窗,确保弹窗响应后再执行后续代码,避免同步问题。文章详细介绍了如何使用Promise和await实现这一功能。

前言

在vue+element ui的前端框架中使用el的confirm弹窗,遇到一个问题,就是连续多个弹窗提示一些信息,要是点击确定继续向下执行,点击取消就退出整个方法。这时发现当代码执行到this.$confirm弹窗时,弹出弹窗后,继续执行了弹窗之后的代码,没有等到弹窗点击确定或是取消之后再执行。

具体解决

其实解决办法也很简单,因为this.$confirm也是一个promise方法,所以可以使用es6中的await等到返回结果。
await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。

......

if(await this.$confirm('是否保存修改?', '确认信息', {
   distinguishCancelAndClose: true,
   confirmButtonText: '保存',
   cancelButtonText: '取消'
 }).catch(() => {}) !== 'confirm') {
	return
}
// 点击取消退出方法,点击保存则继续往下执行
// 若没有await,在弹出弹窗的同时就会接着往下执行
this.doSaveInfo()
......

后记

看官方文档学习一定要看仔细,看明白。认真学习promise和await。

Vivado Schematic视图实战:从RTL分析到布局布线,如何用它快速定位设计问题(附2019.1版操作) 本文深入解析Vivado Schematic视图在FPGA设计中的关键作用,从RTL分析到布局布线全流程,帮助工程师快速定位设计问题。通过三重视图对比、高效调试四步法和高级技巧,提升问题排查效率,缩短调试时间。文章结合2019.1版操作指南和实战案例,展示如何利用Schematic视图解决典型设计问题。 阅读详情

相关推荐

HMMER实战:从零部署到序列分析

本文详细介绍了HMMER工具的安装与使用,从源码编译到环境配置,再到核心工具hmmbuild、hmmsearch等的实战应用。通过球蛋白序列分析案例,展示了HMMER在生物信息学中的强大功能,帮助读者快速掌握序列分析技巧。

weixin_42529366的博客 254

Ant Design Vue全局对话确认框(confirm)的回调不触发

解决ant design vue确认框 点击确认和取消问题

cwb_2120的博客 2586

(53页PPT)新型智慧病房整体解决方案(附下载方式)

当前医疗场景存在三大核心矛盾:院内感染风险(如输液异常发现滞后)、信息孤岛现象(11类业务系统数据割裂)、管理效能不足(30%护理时间耗费在机械性工作)。实际案例显示,整体运营效率提升40%,患者满意度提高28个百分点,真正实现了"让技术有温度,让数据会说话"的价值理念。本文将从需求分析、技术架构、应用场景三个维度,深度剖析这份53页解决方案的创新价值与实践路径。床旁智能终端整合12项功能:包括体征自动采集(误差率<1%)、医嘱执行核对(100%条码校验)、智能床垫离床报警(响应时间3秒)等。

AI_data_cloud的博客 716

vue中this.$confirm

笔记整理: 之前项目中比较常见的confirm确认框写法: /** 单行停用按钮点击回调 */ onStopClick(row: any) { this.$confirm(‘确定停用该条消息吗 ?’, ‘提示’, { confirmButtonText: ‘确定’, cancelButtonText: ‘取消’, type: ‘warning’ }) .then(() => { this.requestSwitchStatus(row) }) .catch(() => {}) } 用的是VUE+

weixin_43996362的博客 4万+

Oracle 19c RAC安装踩坑实录:OpenSSH 8.x版本与OUI的“兼容性战争”及一劳永逸的解决思路

本文深入解析Oracle 19c RAC在Linux8环境中部署时遇到的OpenSSH 8.x版本兼容性问题,特别是[INS-06006]错误的根源与解决方案。从协议层分析冲突本质,提供SCP包装器技术、官方补丁应用指南及现代化部署体系构建三种解决方案,帮助企业高效完成RAC安装并规避类似问题。

weixin_42648844的博客 458

捷联惯导总结--初始对准,位置标定,INS姿态更新,GPS/INS组合

惯导及组合导航回顾  2018.09.16 今天和17系的同学一起把惯导的流程捋了一遍,为了加深自己的记忆,这里在前面把心得大致列出来。 我们这里只考虑捷联式惯导及松组合 首先拿到惯性传感器(加速度计和陀螺仪)需要对其进行标定,是为了求出零偏,比例因子,交轴耦合这些误差。这些误差有的虽然在出厂时会给出,但是考虑到实际环境不同,还是要做标定。一般采用的是六位置旋转法,针对加速度计和陀螺仪同时...

赤豆几维 5万+

VUE中的this.$confirm

确认框写法,(与this.$router相似)VUE+VUX 写法:(参考VUX文档~)这是在项目中比较常见的。

sssssnmmm的博客 3359

IDEA系列(四):IDEA导入Maven工程项目并配置Tomcat启动

本片文章主要介绍如何导入一个存在的maven项目并配置Tomcat启动项目,方便自己使用,也分享出来,希望可以帮助到其他人。

低调D树苗的博客 1244

关于Vue弹框组件this.$confirm

在写学生选课报名的时候用到了弹框组件,于是引用了this.$confirm,此方法同vue-element中的方法基本一致,

泪耳的博客 7881

Multisim14.3中FPGA接口电路设计:原理图项目应用

深入讲解在multisim14.3环境下构建FPGA接口电路的方法,结合原理图设计与项目实践,展现multisim14.3强大的电路仿真能力,提升数字系统开发效率。

weixin_42578963的博客 1158

整车 EOL下线 测试系统介绍

整车下线(EOL)测试专门针对整车进行设计开发,是车企将组装好的整车交付客户前的 最后一道检测工序。EOL 测试针对的是整车下线测试,不同于零部件下线,是整车级别的下线 测试,测试过程关系整车的每个零部件,其测试质量直接影响到整车的质量好坏。因此,整车EOL测试是整车下线必不可少的测试过程.

王小奎的博客 5490

vue 修改 this.$confirm 的文字样式、自定义样式

四、使用 customClass 设置MessageBox 的自定义类名,从而自定义样式。二、createElement 新建元素和对象,然后对新建的元素进行标签化设置。但偶尔也需要修改文字等样式,这时该怎么做呢?就会被当作 HTML 片段处理。属性设置为 true,

金乌的博客 1万+

AI应用工程师面试指南与参考答案

摘要:AnkerAI应用工程师职位面向2024/25届毕业生,要求计算机相关专业背景,强调工程实现与技术探索能力。岗位职责包括全栈开发、AI技术整合(如大模型、图像识别)、团队AI赋能及系统优化。职位更看重编程实践能力(Python/Java等)和学习潜力,而非单纯算法知识。成功候选人将参与智能化产品开发,获得导师指导和技术成长机会。面试准备应聚焦项目经验展示、业务需求理解和技术解决方案能力,通过结构化回答和实操案例体现工程思维与创新潜力。

郑伟强dev的专栏 411

vue中$confirm弹出时就直接走then方法了

项目中遇到这样的情况:confirm框一弹出来就立马执行了then方法中的代码,不符合业务逻辑 代码如下: this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then( this.$message({ type: '

weixin_41796860的博客 4838

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

vue element插件this.$confirm用法(取消也可以发请求)

场景:弹出框的两个按钮都能分别请求接口 最简单的弹出框就是“确定”“取消”,一般用户点击确定才会继续接下来的动作,点击取消则不做任何动作(即不会请求接口)。 如: <template> <el-button type="text" @click="open">点击打开 Message Box</el-button> </template> <script> export default { methods: { ope

qq_42970173的博客 7万+

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

【vue】confirm确认框用法

【Vue】confirm确认框用法confirm确认框 示例代码: this.$confirm("是否确认该操作","提示",{ iconClass: "el-icon-question",//自定义图标样式 confirmButtonText: "确认",//确认按钮文字更换 cancelButtonText: "取消",//取消按钮文字更换 showClose: true,//是否显示右上角关闭按钮

王佑辉的博客 3万+

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

vue2同时使用ant-design-vue和element-ui导致this.$confirm({})方法不生效解决方法

【代码】vue2同时使用ant-design-vue和element-ui导致this.$confirm({})方法不生效解决方法。

m0_65360496的博客 2065

confirm确定按钮点击调用方法失效——this上下文丢失问题

原因是this上下文丢失,可以将onClosed方法改为箭头函数,箭头函数会自动绑定this。

m0_46893049的博客 868

element ui的气泡确认框 点击确定没反应的问题

官网解释 但是我们加上此点击事件后, 点击确定并没有执行相对应的方式 解决办法: @onConfirm

你走过的路 风都是暖的 1852

前端问题集(2):Ant Design Vue 中使用 this.$confirm 时,this调用其他方法失败。

Ant Design Vue 中使用 this.$confirm 时,this调用其他方法失败,提示是该方法未定义。

Yooao的博客 5978

this.$confirm 的.then 中执行 this 失败

作用域问题 https://blog.csdn.net/weixin_41888813/article/details/85243197

lcz134258的博客 3883

element UI中 this.$confirm点击取消还是发请求

element UI中 this.$confirm点击取消还是发请求???

m0_58788799的博客 1570

element-ui报错:Uncaught (in promise) cancel,在使用this.$confirm中报错

这是因为this.$confirm的使用是要带.catch()函数的,如果删除了则会出现如上报错。点击了关闭按钮就会报错。

changyana的博客 729

element-plus $confirm 弹框中实现enter不触发确认按钮

element-plus $confirm 弹框中实现enter不触发确认按钮

attach_uzi的博客 1853

element - 如何通过js调用el-confirm组件?

js调用confirm组件

Dark_programmer的博客 1535

Vue中解决某个方法还未执行完就直接执行下一行代码产生的异步问题,以下给出使用ES7的async/await的解决方案,并就此方法返回Promise对象如何取到里面的存值提出解决方案

1.问题产生的场景:最近项目中有一个手机验证码登录的功能,需要做效验验证码的功能,我使用了引用表单组件自定义效验的方法rules,这种出现的错误信息提示效果拥有更好的用户体验度,功能图片如下: 2.vue前端代码表述,首先我在表单效验rules中验证码对应字段上定义一个validator:validPhoneCode,之后再vue页面data(){}里定义此validPhoneCode方法,...

qq_42751248的博客 3969
上一篇: 用GitHub项目smart-doc生成接口文档
下一篇: vue+el使用日期组件限制开始、结束日期选择范围
老贼大魔王
博客等级 码龄10年 23粉丝 60原创
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值