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.hqwc.cn/news/542553.html

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

相关文章

基础:TCP是什么?

1. TCP 是什么&#xff1f; TCP&#xff08;Transmission Control Protocol 传输控制协议&#xff09; 是一种面向连接的、可靠的、基于字节流的传输层通信协议&#xff0c;由IETF的RFC 793 [1]定义。 TCP旨在适应支持多网络应用的分层协议层次结构。连接到不同但互连的计算机…

详细分析Java中Stream流和for循环的差异之处

目录 前言1. 基本知识2. Demo 前言 事情起因是遍历大数据的时候&#xff0c;数据卡顿很严重 对于Java的基本知识推荐阅读&#xff1a;java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09; 1. 基本知识 在Java中&#xff0c;Stream API提供…

【PythonCode】力扣Leetcode6~10题Python版

【PythonCode】力扣Leetcode6~10题Python版 前言 力扣Leetcode是一个集学习、刷题、竞赛等功能于一体的编程学习平台&#xff0c;很多计算机相关专业的学生、编程自学者、IT从业者在上面学习和刷题。 在Leetcode上刷题&#xff0c;可以选择各种主流的编程语言&#xff0c;如C、…

Backend - Windows 自动排程

目录 一、创建排程 1. Windows 键 R 打开"运行"。输入taskschd.msc 回车&#xff0c;进入工作排程器。 2. 在右侧“动作”导航栏中&#xff0c;点击“建立工作”。 3. 设置“一般”、“触发程序”、“动作”。 4. 排程管理 二、运行问题 1. 文件位置相关问题…

软考高级:BPR 和 BPM概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

中电金信:技术实践|Flink维度表关联方案解析

导语&#xff1a;Flink是一个对有界和无界数据流进行状态计算的分布式处理引擎和框架&#xff0c;主要用来处理流式数据。它既可以处理有界的批量数据集&#xff0c;也可以处理无界的实时流数据&#xff0c;为批处理和流处理提供了统一编程模型。 维度表可以看作是用户来分析数…

【AI+应用】一步步搭建聊天机器人搭配多种国内外大模型以及api接口调用

如果你看过我之前写的一篇文章 【AI应用】怎么快速制作一个类chatGPT套壳网站&#xff0c; 你可能顺利地使用chatGPT、Gemini&#xff0c; 用得很happy。 突然有一天&#xff0c;你发现一些网站&#xff0c;除了chatGPT、Gemini &#xff0c;还可以切换使用国内外其他的大模型…

你为什么是你,而不是别人?认识人格的力量

你为什么是你&#xff0c;而不是别人&#xff1f;让你做自我介绍&#xff0c;你会怎么描述自己呢&#xff1f; 人格心理学是心理学的一门重要分支学科。探求、描述和揭示个体思想、情绪及行为的独特模式&#xff0c;综合个人与环境诸多影响因素&#xff0c;对现实社会中的个人作…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:ColumnSplit)

将子组件纵向布局&#xff0c;并在每个子组件之间插入一根横向的分割线。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含子组件。 ColumnSplit通过分割线限制子组件的高度。初始…

电视盒子解析安装包失败,安卓4.4安装不了kodi的解决方法,如何安装kodi

有些安卓电视或者电视盒子的安卓系统版本太低、自身架构或者屏蔽了安装其他应用的功能&#xff0c;下载的Kodi apk安装包提示无法安装&#xff0c;解析程序包时出现问题、解析出错无法安装、[INSTALL_FAILED_OLDER_SDK]、此应用与您的电视不兼容。 解决方法&#xff1a; 1、3…

linux下重启ORACLE

切换到oracle用户 su - oracle 登录oracle sqlplus / as sysdba 启动数据库 startup 退出数据库 exit 启动监听 lsnrctl start FINISH

【Java设计模式】二十三、解释器模式

文章目录 1、解释器模式2、案例 1、解释器模式 计算一个表达式的值&#xff0c;比如12-34-7&#xff0c;单纯的定义方法或函数很难适配所有&#xff0c;因为数值和运算符可以有无数种组合。 //用于n个整数相加 public static int add(Integer ... arr) {int sum 0;for (Inte…