vue使用elementPlus ui框架,如何给Dialog 对话框添加Loading 自定义类名显示隐藏

vue使用elementPlus ui框架时,如何给Dialog 对话框添加Loading 自定义类名,想要实现dialog对话框区域有loading效果

在这里插入图片描述
官方给出的这个API配置项customClass,使用不太明确。暂时无法实现绑定class。
在这里插入图片描述
最后的实现方式:

<template><el-dialogv-model="dialogVisible":align-center="true"title="上传弹框"width="700px":before-close="handleClose":close-on-click-modal="false"class="loading-class"><el-form ref="uplodDialogRef" :model="form" :rules="rules"><el-form-item label="应用" label-width="120px" ></el-form-item><el-form-item label="渠道" label-width="120px"></el-form-item><el-form-item label="上传" label-width="120px" ></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="submitBtn" type="primary">保存</el-button><el-button @click="handleClose">取消</el-button></span></template></el-dialog>
</template>

el-dialog绑定class="loading-class",然后:

<script lang="ts" setup>
import { ElLoading } from 'element-plus'
const submitBtn= ()=>{const loading = ElLoading.service({target: '.loading-class'})setTimeout(() => {loading.close()}, 2000)
}
</script>

实现效果如图,只展示dialog组件内有loading加载,其他区域无loading。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/748258.shtml

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

相关文章

吐槽FineDataLink工具Format函数处理日期转字符串格式的说明文档

一.背景 为公司师带徒的任务做些记录。 二.文档存在的问题 1.文档情况 FORMAT-格式转换- FineBI帮助文档 FineBI帮助文档 函数定义&#xff1a; FORMAT(object,format) formart的格式有哪些呢&#xff1f;我们截图看看&#xff1a; 2.文档说明不足问题 同事的需求是把时…

gen_circle_

read_image (Image, fabrik) gen_circle_contour_xld (ContCircle, 200, 200, 100, 0, 6.28318, positive, 1) gen_circle_sector (CircleSector, 200, 200, 100.5, -0.392699, -1.1781) gen_circle_sector 创建一个圆形扇区。 gen_region_contour_xld 从 XLD 轮廓创建一个区…

AI人工智能培训讲师ChatGPT讲师叶梓培训简历及提纲ChatGPT等AI技术在医疗领域的应用

叶梓&#xff0c;上海交通大学计算机专业博士毕业&#xff0c;高级工程师。主研方向&#xff1a;数据挖掘、机器学习、人工智能。历任国内知名上市IT企业的AI技术总监、资深技术专家&#xff0c;市级行业大数据平台技术负责人。 长期负责城市信息化智能平台的建设工作&#xff…

[数据集][目标检测]牛羊检测数据集VOC+YOLO格式3393张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3393 标注数量(xml文件个数)&#xff1a;3393 标注数量(txt文件个数)&#xff1a;3393 标注…

免费阅读篇 | 芒果YOLOv8改进109:注意力机制SimAM:用于卷积神经网络的简单、无参数注意力模块

免费阅读篇|芒果YOLOv8改进109&#xff1a;注意力机制篇SimAM&#xff1a;用于卷积神经网络的简单、无参数注意力模块 &#x1f4a1;&#x1f680;&#x1f680;&#x1f680;本博客 改进源代码改进 适用于 YOLOv8 按步骤操作运行改进后的代码即可 该专栏完整目录链接&#x…

C#中的隐式操作符,如何简化类型转换

&#x1f3c6;作者&#xff1a;科技、互联网行业优质创作者 &#x1f3c6;专注领域&#xff1a;.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造 &#x1f3c6;欢迎关注我&#xff08;Net数字智慧化基地&#xff09;&#xff0c;里面…

RocketMQ学习笔记四(黑马)项目

课程地址&#xff1a; 1.Rocket第二章内容介绍_哔哩哔哩_bilibili &#xff08;视频35~88&#xff0c;搭建了一个电商项目&#xff09; 待学&#xff0c;待完善。

JVM相关

文章目录 JVM的类加载过程JAVA内存泄露内存泄露的常见原因内存泄露的影响问题排查 JVM的调优java四种引用类型 JVM的类加载过程 JVM的类加载过程包括加载&#xff08;Loading&#xff09;、验证&#xff08;Verification&#xff09;、准备&#xff08;Preparation&#xff09…

找准方向选CRM客户管理系统!2023年排行榜推荐

本文将为大家带来2023有哪些好用CRM客户管理系统&#xff1f;CRM系统排行榜基于品牌知名度、功能、产品实力、系统稳定性、用户体量等多重因素考量。其中Zoho CRM、红圈CRM等产品市场表现优异入选此次榜单。 1.Zoho CRM 公司成立时间&#xff1a;1996年 Zoho&#xff08;卓豪…

【算法】AC自动机的优化:增量更新与删除

一、概述 AC自动机&#xff08;Aho-Corasick Automation&#xff09;是著名的多模匹配算法&#xff0c;源于贝尔实验室&#xff0c;并且在实际应用中得到广泛的引用&#xff0c;且具有以下特点&#xff1a; 只需要扫描一次文本&#xff0c;即可获取所有匹配该文本的模式串复杂…

CSS扩展选择器

文章目录 1. 并集选择器2. 交集选择器3. 后代选择器4. 子代选择器5. 兄弟选择器5.1. 相邻兄弟选择器5.2. 通用兄弟选择器 6. 属性选择器7. 伪类选择器7.1. 动态伪类7.2. 结构伪类7.3. 否定伪类 8. 伪元素选择器9. Google 改进案例 1. 并集选择器 选中多个选择器对应的元素。一…

如何在Linux上使用git远程上传至gitee托管(add-commit-push指令详解)

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

力扣209. 长度最小的子数组

思路&#xff1a;题目是 数组和 > target&#xff0c;不是等于target 双指针法&#xff1a;用for循环中的 r 来界定右边界的下标&#xff0c;右边界每移动一位&#xff0c;左边界可能需要移动多位&#xff0c;所以内部再用while, 当满足 数组和>target时&#xff0c;记录…

C语言基础之结构体

文章目录 一、结构体1、结构体概述2、结构体类型的定义方式&#xff08;1&#xff09;先定义结构体类型&#xff0c;再定义结构体变量&#xff08;2&#xff09;结构体类型、变量同时定义&#xff08;3&#xff09;一次性结构体 3、结构体成员的初始化(1)结构体初始化(2)清空结…

Flutter 添加三方库后,运行不起来或缓慢问题(Gradle)

背景 在Flutter项目&#xff08;包含Android平台&#xff09;初期&#xff0c;经常发现在Flutter添加了一个三方库依赖之后&#xff0c;重新运行的时候就要等很久&#xff0c;或者直接报错。查看详细日志会发现&#xff0c;耗时一般都是由于新的三方库也有自己的Android的代码…

RISC-V Optimization Guide(笔记)

官网发表的文章地址&#xff1a;RISC-V Optimization Guide B站有人做过解读视频&#xff0c;这篇文章也是看视频时做的笔记&#xff1a;视频地址 一、标量整数优化 1.1 常量的具体化 使用lui/addiw将立即数加载至寄存器&#xff0c;当立即数低12位的最高位为1时&#xff0c…

数据库 | MYSQL这个复杂系统如何上手?

当你不知道从何入手研究或解决一个复杂系统的问题时&#xff0c;通常意味着你没有找到合适的切入点或者缺乏对系统整体和细节之间联系的理解。在这种情况下&#xff0c;一个有用的策略是寻找系统的基本原理或构成要素。 小时候&#xff0c;你可能也玩过玩具四驱车。有的四驱车…

Elasticsearch(10) match的使用

elasticsearch version&#xff1a; 7.10.1 Elastic Match是Elasticsearch中用于全文搜索的一种查询语法。它可以将搜索词进行分词&#xff0c;并与目标查询字段进行匹配。 match的语法 GET /<index>/_search {"query": {"match": {"<fiel…

从零开始利用MATLAB进行FPGA设计(三)将Simulink模型转化为定点数据类型

文章灵感来源于MATLAB官方免费教程&#xff1a;HDL Coder Self-Guided Tutorial 考虑到MATLAB官网的英文看着慢&#xff0c;再加上视频讲解老印浓浓的咖喱味&#xff0c;我决定记录利用MATLAB&Simulink&SystemGenerator进行FPGA数字信号处理的学习过程。 往期回顾&am…

Alias许可数量计算

在数字化时代&#xff0c;软件许可数量的合理配置是企业实现成本控制与合规运营的关键。然而&#xff0c;企业在计算软件许可数量时&#xff0c;往往面临诸多困惑。如何精确评估软件需求&#xff0c;确保合规使用&#xff0c;降低成本&#xff0c;成为了企业关注的焦点。Alias许…