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

强化学习赋能宇树机器狗:Isaac Gym与MuJoCo仿真训练全解析 本文详细解析了如何利用Isaac Gym和MuJoCo两大仿真平台为宇树机器狗构建强化学习训练管道。内容涵盖环境配置、模型导入、PPO算法框架设计、奖励函数构建以及从仿真到实机的策略迁移技巧,为开发者提供了一套完整的宇树狗仿真训练实践方案。 阅读详情
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。

【遥感数字图像处理(朱文泉)】第四章 变换域处理方法 变换域的处理方法 阅读详情

相关推荐

QT-使用ECharts显示地图,还有更多惊艳的图表等待你的使用

QT-使用ECharts显示地图前言一、使用步骤1.下载示例2. QT使用HTML文件配置3.使用HTML文件4. 数据交互及自适应总结注意:这个地图是百度的在线地图,需要百度API密钥和在联网的状态下使用。离线使用图表 前言 我上文QT图表chart-饼状图,使用qt自带的图表库charts来显示图表,实现数据可视化,但是QT自带的图表库显示效果并不佳,通俗说,就是不好看。 然而,有这么一个开源图表库,图表种类极多,并且效果良好,能够实现具有很好的视觉冲击的数据可视化。 它就是Apache ECharts

博咯的博客 4898

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

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

cwb_2120的博客 2586

告别Qweb!用ReportBro在Odoo 13-19版本中5步搞定动态报表

本文介绍了如何在Odoo 13-19版本中使用ReportBro替代Qweb快速实现动态报表设计。通过5步集成指南,包括环境准备、前端集成、后端服务搭建等,展示了ReportBro在可视化设计、即时预览和多格式输出(PDF/XLSX)方面的优势,显著提升开发效率和报表灵活性。

mac99的博客 801

vue中this.$confirm

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

weixin_43996362的博客 4万+

Cursor 团队代码规范与开发规则

本文提出了一套 Cursor 项目开发规范,涵盖代码结构、命名、日志、测试等关键环节,旨在提升代码质量和团队协作效率。核心规则包括:文件不超过2000行、函数不超过80行;变量命名禁用无意义单词;日志只记录关键信息;配置项禁止硬编码;依赖和敏感信息统一管理;核心逻辑测试覆盖率≥80%;Git提交遵循Conventional Commits规范。通过一个车辆数据处理函数的改造案例,展示了从"不规范"到"规范"的代码优化过程,体现了拆分函数、常量管理、错误处理等规范的实际

1256

间充质干细胞衰老机制与抗衰老干预策略研究

干细胞技术在再生医学领域具有广阔应用前景,其中间充质干细胞(MSCs)因其多向分化潜能和免疫调节特性备受关注。细胞衰老是影响干细胞治疗效果的共性难题,表现为增殖能力下降、端粒缩短等特征。通过表观遗传学分析发现,衰老MSCs存在DNA甲基化异常和组蛋白修饰改变;线粒体功能障碍导致ATP产量锐减,ROS累积显著增加。针对这些机制,研究者开发了包括小分子化合物筛选、CRISPR基因编辑和三维培养优化在内的多种干预策略。这些技术在组织修复、抗衰老治疗等应用场景中展现出重要价值,例如可提升心肌梗死修复效率2.3倍,缩

weixin_33502772的博客 229

VUE中的this.$confirm

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

sssssnmmm的博客 3359

AFSim 2.9实战指南:从入门到精通的中文教程

本文是AFSim 2.9的实战指南,提供从零开始的中文教程。内容涵盖仿真环境搭建、实体行为控制、脚本编写,到传感器、武器系统集成与复杂想定构建,最后讲解数据记录与结果分析方法,帮助用户快速掌握这一强大的军事仿真框架。

weixin_29281941的博客 947

关于Vue弹框组件this.$confirm

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

泪耳的博客 7881

【CUT&TAG分析-加了spike in的样品】

使用 Bowtie2 或 Subread (subjunc) 来构建大肠杆菌的索引。bowtie2比对时设置参数–local, 局部比对。

weixin_57975238的博客 1400

【AUTOSAR实战】:CAN发送邮箱忙导致报文发送丢帧的问题调试

本文档主要讨论了CAN总线通信中可能出现的TC377传输错误的分析和解决方案。文章提供了如何通过检查CAN传输和接收过程、识别传输缓冲区的类型和状态以及选择适当的内存保护功能来检测和解决此类错误的见解。经过多次尝试和分析,得出的结论是,修改CANIF缓冲的尺寸并重新分配报文给各个buffer并不能解决问题。此外,发送中断被抢占可能导致报文无法发送,最终也将此因素排除。本文档还提到了一些可能导致发送流程调度出现问题的因素,例如CANIF中报文引用Buffer不合理。

weixin_46481662的博客 3141

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

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

金乌的博客 1万+

【docker】第10篇 Failed with result ‘exit-code和Start request repeated too quickly和Failed to start Docker

【docker】解决 Failed with result 'exit-code'和Start request repeated too quickly和Failed to start Docker。

Fanjufei的博客 6819

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

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

weixin_41796860的博客 4838

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

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

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

qq_42970173的博客 7万+

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

【vue】confirm确认框用法

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

王佑辉的博客 3万+

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

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、付费专栏及课程。

余额充值