【Vue】给 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按钮的加载效果

news/2024/7/7 23:01:08

文章目录

  • 主要使用 beforeClose 方法实现 loading 的效果
  • beforeClose MessageBox 关闭前的回调,会暂停实例的关闭
function(action, instance, done)

1. action 的值为'confirm', 'cancel''close'2. instance 为 MessageBox 实例,可以通过它访问实例上的属性和方法。
3. done 用于关闭 MessageBox 实例。
  • 具体实现:(this.$confirm、this.$alert、 this.$prompt实现方法一样)
this.$prompt('名称', '新建表单', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  beforeClose: async (action, ctx, close) => {
  	// 如果非确认按钮事件,则直接关闭弹窗
    if (action !== 'confirm') {
      close();
      return;
    }
    // confirmButtonLoading 是在 elementUI-message-box下的 main.vue 文件中封装的参数
    ctx.confirmButtonLoading = true;
    try {
      // ctx.inputValue 获取 input 输入框的值
      await this.createApi(ctx.inputValue);
      // 提交成功后关闭窗口
      close();
    } catch (error) {}
    ctx.confirmButtonLoading = false;
  },
});
  • 实现前:
    在这里插入图片描述
  • 实现后:
    在这里插入图片描述

http://lihuaxi.xjx100.cn/news/1343006.html

相关文章

【HCIA】06.静态路由

路由器的作用:通过路由器让不同广播域实现互联互通;路由可以指的是路由器,也可以是传递的一个动词,或者是一个路由条目信息。 在一个典型的数据通信网络中,往往存在多个不同的IP网段,数据在不同的IP网段之…

【调试】MNN库编译踩坑记录

简述 MNN是阿里的推理框架,号称很快,因此要编译试试。 文档地址: https://www.yuque.com/mnn/cn 仓库地址: https://github.com/alibaba/MNN 中文文档和英文文档有些许不同,本文按照中文文档进行编译。 编译主库 环…

Web_php_include

代码审计 进入环境&#xff0c;根据题目的提示&#xff0c;本题考察文件包含漏洞 <?php show_source(__FILE__); echo $_GET[hello]; $page$_GET[page]; while (strstr($page, "php://")) {$pagestr_replace("php://", "", $page); } incl…

Coremail亮相2023操作系统产业大会,荣获行业开拓奖

近日&#xff0c;由中国电子信息产业集团有限公司主办、麒麟软件有限公司承办的“麒麟遨天 聚创未来”2023操作系统产业大会在北京隆重举行。 Coremail作为邮件安全解决方案提供商受邀参加本次大会&#xff0c;荣获“2023优秀生态解决方案行业开拓奖”。 本次大会邀请了来自全国…

kaggle,球员接触检测

比赛链接 比赛目标 检测球员在NFL橄榄球比赛中所经历的外部接触。你将使用视频和球员跟踪数据来识别与接触的时刻&#xff0c;以帮助提高球员的安全。 评价指标 马修斯相关系数&#xff08;Matthews Correlation Coefficient&#xff0c;简称MCC&#xff09;是一种常用的二…

Qt使用QSS设置控件样式

Qt使用QSS设置控件样式 在这篇文章中&#xff0c;我们将会学习如何使用QSS&#xff08;Qt样式表&#xff09;来自定义QPushButton、QLabel、QLineEdit和QComboBox控件的样式。在Qt中&#xff0c;我们可以使用QSS来定制控件的外观&#xff0c;并且能够方便地整合到我们的应用程…

强引用、软引用、弱引用和虚引用的区别

主要的区别在于什么时候回收对象&#xff1b; 强引用&#xff1a;垃圾回收器就不会回收这个对象&#xff1b;软引用&#xff1a;如果内存足够&#xff0c;不回收&#xff0c;如果内存不足&#xff0c;则回收&#xff1b;弱引用&#xff1a;不管当前内存空间足够与否&#xff0…

ELK-日志服务【redis-配置使用】

目录 环境 【1】redis配置 【2】filebeat配置 【3】对接logstash配置 【4】验证 【5】安全配置&#xff1a;第一种&#xff1a;kibana-nginx访问控制 【6】第二种&#xff1a;在ES-主节点-配置TLS 【7】kibana配置密码 【8】logstash添加用户密码 环境 es-01,kibana 1…