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

手教你如何使用Simulink和相关工具箱模拟和实现无人机的多机接力信号中继的建模 扩大通信范围:单架无人机的通信能力有限,通过多机接力的方式可以显著扩展通信覆盖范围。提高可靠性:当某架无人机出现故障或电量不足时,其他无人机可以接管其任务,确保通信不中断。适应复杂环境:在山区、森林等复杂地形中,多机接力可以绕过障碍物,建立稳定的通信链路。使用Communications Toolbox中的模块来模拟无线通信链路。例如,可以使用模块模拟噪声信道,或者使用模块计算信号衰减。matlab深色版本。 阅读详情
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。

数据分享】中国12.5m数字高程模型(DEM)数据(分省) 数据名称:ALOS 12.5m DEM 数据。数据名称:ALOS 12.5m DEM 数据。数据大小:61.5GB。空间分辨率:12.5m。数据大小:61.5GB。空间分辨率:12.5m。 阅读详情

相关推荐

图的一些基本知识:图,邻居,度矩阵,邻接矩阵

目录前言图(graph)邻居(neighborhood)度矩阵(degree)邻接矩阵(adjacency)参考文献 前言       本文介绍了一些图论的基础知识,包括图的表示、邻接矩阵、度矩阵等(边不带权值的情况),本文中某些图片或者知识的参考/来源已列于本文最后。 图(graph)       图用G=(V, E)表示,V中元素为...

luzaijiaoxia0618的博客 6万+

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

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

cwb_2120的博客 2586

matlab特征提取和分类_SAST Weekly|MATLAB机器学习初探——做个心音分类器

SAST weekly 是由电子工程系学生科协推出的科技系列推送,内容涵盖信息领域技术科普、研究前沿热点介绍、科技新闻跟进探索等多个方面,帮助同学们增长姿势,开拓眼界,每周更新,欢迎关注!欢迎愿意分享知识的同学投稿至 eesast@mail.tsinghua.edu.cn , 期待你的作品!本期的SAST weekly,想跟大家分享一下如何用MATLAB进行初步的机器学习,构建一个正常/...

weixin_36453829的博客 5581

vue中this.$confirm

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

weixin_43996362的博客 4万+

Cadence元件库介绍

Cadence安装完之后,在安装目录下,会有默认自带的一些常用元件库。例如,我的Candece安装目录为: D:\Cadence\Cadence_SPB_17.2-2016 元件库所在目录为: D:\Cadence\Cadence_SPB_17.2-2016\tools\capture\library 各个元件库对应的内容如下: AMPLIFIER.OLB 共 182 个零件,存放模拟放大器 IC,如 CA3280,TL027C,EL4093 等。 ARITHMETIC.OLB 共 182 个零件,存放

年少时的棉花糖 1万+

Basler相机和pylon viewer 的使用

文章目录1 线路连接2 安装和使用pylon 1 线路连接 电源线接到电源插座,网线接到电脑(电脑没有网口的话,可用转换器转到type-c接口)。 2 安装和使用pylon 参考 Basler pylon安装及对网口相机基本设置 相机和电脑以太网IP设置参考:balser相机IP设置 关于相机参数和pylon viewer的详细设置,可以参考pylon Viewer安装路径下的文档(Documentation) ...

Deephome的博客 1万+

VUE中的this.$confirm

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

sssssnmmm的博客 3359

10bit SAR ADC电路:200多页设计与仿真文档,附gpdk045工艺与testbench,可直接导入Virtuoso仿真,含以太网、PLL电路例程及进阶ADC

拥有超过200页的详细设计和仿真文档,它以gpdk045工艺为基础,testbench均可直接导入virtuoso仿真,为我们提供了一个全面了解ADC电路设计的绝佳机会。通过对10bit SAR ADC电路的详细解析,我们不仅了解了其设计背后的原理和实现方法,还体会到了数字与模拟技术的交融之美。这个SAR ADC的结构采用了经典的电荷重分配架构。一个10bit SAR ADC电路,有200多页详细的设计和仿真文档,附带对应的gpdk045工艺,testbench都有,可直接导入virtuoso仿真。

OMyAVKmGPBOF的博客 1334

关于Vue弹框组件this.$confirm

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

泪耳的博客 7881

Windows下OpenMBEE项目MMS部署失败经历及改正

在Github里找到了上面的第一份文档,下载了MMS源代码(不知道为什么这个代码跟上面操作克隆得到的MMS代码不一样?好像是因为Gradle的版本问题,我本地之前已经安装过7.6.4的Gradle了,于是我找到gradle-wrapper.properties文件。后面在VScode中运行了一下依然是报这个错误,我在VScode终端直接执行。不知道为什么依然没什么用。打开“Windows PowerShell”。(如果是第一次运行它,将看到更长的输出)导航到要克隆存储库的文件夹,例如,

Yo_lan_da的博客 1869

实战:RK3568 Android14 调试 ES8388 音频驱动 (MIC 篇)

这个板子的MIC设计使用了硬件自动切换方案,极大简化了软件层面的逻辑。我们不需要根据耳机插拔事件去编写复杂的路由切换代码,只需要守住 LIN1/RIN1 这一个入口,配置好增益,剩下的交给那颗 SGM3157 芯片即可。祝您的录音功能调试顺利!

qq_33427070的博客 1681

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

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

金乌的博客 1万+

25 - GRACE Mascon数据缺失月份数据插值

本篇基于文章的相关内容和文章公开的奇异谱分析(SSA)插值算法程序包,对grace Mascon数据种缺失的月份进行 插值 ,总结了使用程序包的相关过程,可以将该程序应用到其他数据处理插值计算中。

weixin_43339605的博客 1843

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

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

weixin_41796860的博客 4838

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

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

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

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

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

qq_42970173的博客 7万+

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

【vue】confirm确认框用法

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

王佑辉的博客 3万+

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

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

余额充值