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

news2024/11/27 16:36:05

文章目录

  • 主要使用 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://www.coloradmin.cn/o/753132.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

不外传秘诀| docker 快速搭建常用的服务环境

本文主要给大家介绍如何使用 docker 搭建常用的服务环境, 包括mysql,reedis,nginx,jenkins 等常用的环境,下面直接进入主题。 1、MySQL 部署 ①搜索 MySQL 镜像 docker search mysql ②拉取 MySQL 镜像 docker pull mysql:5.7 ③创建容器&#xf…

嵌入式LinuxLED驱动开发实验

目录: 1. Linux下LED灯的驱动原理1.1. 地址映射1.1.1. 实际物理地址映射到虚拟地址的函数1.1.2. 内存访问函数 2.硬件原理图分析3. 实验程序编写3.1. 驱动程序编写3.2. 应用程序编写 4. 运行测试 1. Linux下LED灯的驱动原理 我们在裸机实验的时候,都是通…

2023年最具威胁的25种安全漏洞(CWE TOP 25)

1. CWE 4.12发布 最近几年,每年6月CWE发布的版本都成为一年中最重要的版本,因为里面包含了新的CWE TOP 25 视图,也就是我们常说的:CWE最具威胁的25种缺陷。 CWE 4.12 在6月29号发布,里面包含了重要的2023年TOP25视图…

Promise分享

手写promise之前需要知道 宏任务 & 微任务 我们都知道 Js 是单线程的,但是一些高耗时操作就带来了进程阻塞问题。为了解决这个问题,Js 有两种任务的执行模式:同步模式(Synchronous)和异步模式(Asynchr…

2023年先进封装行业研究报告

第一章 行业概况 1.1 概述 封装是半导体制造过程中的一个重要步骤。在这个步骤中,半导体芯片(或称为集成电路)被包裹在一个保护性的外壳中。这个外壳的主要功能是保护芯片免受物理和化学损害,例如防止芯片受到潮湿、尘埃、温度变…

git clone 或者是vscode clone 时遇到the remote end hung up unexpectedly

fatal: the remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed使用git clone总是报错 查看原因有三种可能:要么是缓存不够,要么是网络不行,要么墙的原因。 如果是网络不行,可以配置git的最低速度和最…

pdf.js移动端展示预览打开pdf-pdfh5.js

有问题可以加Q群咨询,技术交流群,也可以探讨技术,另有微信群可以问群主拉入微信群 QQ群521681398 pdfh5博客主页 pdfh5项目GitHub地址 pdfh5项目gitee地址 react、vue均可使用 example/test是vue使用示例 example/vue3demo是vue3使用示…

第三章系统控制(Cortex-M7 Processor)

第三章系统控制 目录 第三章系统控制 3.1关于系统控制 3.2寄存器汇总 3.3寄存器描述 3.3.1辅助控制寄存器 3.3.2cpu基寄存器 3.3.3 Cache Level ID寄存器 3.3.4缓存大小ID寄存器 3.3.5缓存大小选择寄存器 3.3.6指令和数据紧密耦合的存储器控制寄存器 3.3.7 AHBP控制寄存器 3…

2023京东防暑消暑市场分析:冷风扇、移动空调等硬核防暑产品火爆

今年夏天,高温天气频发,各种防暑类产品也向多场景延伸,不少行业、类目都因此高速增长,包括防暑类电器、防晒用品、小型户外避暑神器等。 *高温刺激下,防暑类家电需求暴涨 在夏季高温的刺激下,空调、风扇等等…

HTML input text 常用事件

前言 用于记录开发中常用到的&#xff0c;快捷开发 简单实例 <input type"text" name"noSecretKeyJson" maxlength"200" />常用事件 oninput &#xff08;在用户输入时触发&#xff09;及案例 案例一&#xff1a;限制只允许输入数字…

Java 函数式编程(常用接口)

之前已经介绍过了Java8函数式变成及Lambda表达式&#xff0c;感兴趣可以看看&#xff0c;地址&#xff1a;Java8函数式编程&#xff08;Lambda表达式&#xff09;_琅琊之榜PJ的博客-CSDN博客 本文主要介绍一下常用的接口及用法&#xff0c;先来看一个表格&#xff1a; 本文主要…

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

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

Jupyter notebook添加与删除kernel

目录 1 添加虚拟环境的kernel 2 删除jupyter notebook已有的kernal 3 切换内核与查看当前内核 4 添加C语言的kernel 5 添加python2的kernel 6 添加java语言的kernel 6.1 sudo apt install default-jre 6.2 下载并安装 ijava 6.3 sudo apt install openjdk-11…

四、评估已建立的模型

别人不讲道理 不是我们跟着不讲道理的理由 1 模型评估 希望fθ(x)对未知数据x输出的预测值尽可能正确。 如何测量预测函数fθ(x)的正确性&#xff0c;也就是精度呢&#xff1f; 观察函数的图形&#xff0c;看它能否很好地拟合训练数据&#xff1a; 我们需要能够定量地表示机…

2022 JavaScript调查:TypeScript持续主导,Vite和Tauri大受欢迎

StateOfJS 最新发布了 2022 年 JavaScript 现状调查报告指出&#xff0c;Solid 和 Qwik 等新兴前端框架正在挑战 React 的权威。该报告基于对近 40,000 名 Web 开发人员的调查&#xff0c;数量几乎是去年的两倍。 JavaScript 可能发展得很快&#xff0c;但 JavaScript 开发人员…

4. Shuffle 5. 内存的管理

4. Shuffle (1) Shuffle 的原理和执行过程 在Scala中&#xff0c;Shuffle是指对集合或序列进行随机打乱或重新排列的操作。它可以用于打乱集合中元素的顺序&#xff0c;以便在后续的操作中获得更好的随机性或均匀性。 在Scala中&#xff0c;可以使用scala.util.Random类的shu…

只会Excel制表?搭配上这个工具,让你的办公效率无限翻倍

在每次考试之后&#xff0c;老师们通常需要进行繁重的工作&#xff0c;包括使用Excel汇总学生的考试成绩、计算平均分和成绩排名等。然而&#xff0c;现在学校不允许公布学生成绩&#xff0c;这给老师们增加了额外的工作量和麻烦。一些老师采取了将学生成绩表截成一条一条的成绩…

使用HummerRisk进行K8s安全合规检测

1.简介 HummerRisk 是开源的云原生安全平台&#xff0c;以非侵入的方式解决云原生的安全和治理问题。核心能力包括混合云的安全治理和云原生安全检测。 今天我们来通过 HummerRisk 云原生安全检测能力来对Kubernetes进行安全合规检测 2.检测步骤 ①首先创建一个Kubernetes账…

spring复习:(19)单例bean是在哪里被加入到一级缓存的?

AbstractBeanFactory的doGetBean方法&#xff1a; 如果是第一次调用getBean时&#xff0c;会执行到下边的代码&#xff1a; getSingleton的代码如下&#xff1a; public Object getSingleton(String beanName, ObjectFactory<?> singletonFactory) {Assert.notNull(bea…

windows安装mysql8.0.23版本成功示例-免安装

windows安装mysql8.0.23版本成功示例 一.通过mysql-installer-*.msi安装包的方式1.安装准备1.1 官网下载地址1.2 选择合适的版本点击下载 2.安装mysql 二.通过mysql-8.0.23-winx64.zip压缩包免安装方式1.安装准备1.1 下载官网压缩包1.2 解压后配置文件my.ini信息1.3 配置my.ini…