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

news2024/11/26 18:40:58

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

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

<template>
  <el-dialog
    v-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.coloradmin.cn/o/1511578.html

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

相关文章

数据分析-Pandas如何观测数据的中心趋势度

数据分析-Pandas如何观测数据的中心趋势度 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据…

Redis中的缓存设计

缓存穿透 缓存穿透是指查询一个根本不存在的数据&#xff0c;缓存层和存储层都不会命中&#xff0c;通常处于容错的考虑&#xff0c;如果从存储层查不到数据则不写入缓存层。缓存穿透将导致不存在的数据每次请求都要到存储层去查询&#xff0c;失去了缓存保护后端存储的意义。…

基于PyTorch深度学习实战入门系列-Numpy基础全

Numpy的使用 导入Numpy模块 import numpy as np创建数组&#xff08;一维数组、小数数组、二维数组&#xff09; # 创建一个一维数组 n1 np.array([1, 2, 3]) # 创建一个含有小数的一维数组 n2 np.array([0.1, 0.2, 0.3]) # 创建一个简单的二维数组 n3 np.array([[1, 2], [3…

Apache SkyWalking 监控 Linux 实战

SkyWalking 从 8.4 版本开始支持监控主机&#xff0c;用户可以轻松从 dashboard 上检测可能的问题&#xff0c;例如当 CPU 使用过载、内存或磁盘空间不足或者当网络状态不健康时等。 与监控 MySQL Server 类似&#xff0c;SkyWalking 也是利用 Prometheus 和 OpenTelemetry 收集…

数据结构-链表(一)

一、链表简介 链表&#xff08;Linked List&#xff09;是一种常见的数据结构&#xff0c;用于存储和组织数据。与数组不同&#xff0c;链表的元素&#xff08;节点&#xff09;在内存中不必连续存储&#xff0c;而是通过指针链接在一起。 链表由多个节点组成&#xff0c;每个…

C++day2——引用、结构体、类

思维导图&#xff1a; 2、自己封装一个矩形类(Rect)&#xff0c; 拥有私有属性&#xff1a;宽度(width)、高度(height)&#xff0c; 定义公有成员函数初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w)更改高度的函数:set_h(int h) 输出该矩形的周长和面积函…

逆向案例七——中国天气质量参数搜不到加密,以及应对禁止打开开发者工具和反debuger技巧

进入相关城市数据页面&#xff0c;发现不能调试 应对方法&#xff0c;再另一个页面&#xff0c;打开开发者工具&#xff0c;选择取消停靠到单独页面 接着&#xff0c;复制链接在该页面打开。接着会遇到debugger 再debugger处打上断点&#xff0c;一律不在此处暂停。 然后点击继…

数据结构中的堆(Java)

文章目录 把普通数组转换大顶堆数组堆增删改查替换堆排序 把普通数组转换大顶堆数组 该方式适用索引为0起点的堆 在堆&#xff08;Heap&#xff09;这种数据结构中&#xff0c;节点被分为两类&#xff1a;叶子节点&#xff08;Leaf Nodes&#xff09;和非叶子节点&#xff08;N…

springboot的Converter和HttpMessageConveter

Converter和HttpMessageConveter是springboot和springmvc在处理请求的时候需要用到的。但是这两者的完全是不一样的&#xff0c;作用的地方也不一样。 1&#xff0c;springboot和springmvc处理请求的流程 先来回顾一下处理请求的流程&#xff1a; 用户向服务器发送请求&#…

云原生应用(2)之使用容器运行Nginx应用及Docker命令

一、使用Docker容器运行Nginx 1.1 使用docker run命令运行Nginx应用 1.1.1 观察下载容器镜像过程 查找本地容器镜像文件&#xff1b; 执行命令过程一&#xff1a;下载容器镜像 # docker run -d nginx:latest Unable to find image nginx:latest locally latest: Pulling from…

软考72-上午题-【面向对象技术2-UML】-UML中的图3

一、状态图 1-1、状态图的定义 状态图&#xff0c;展现了一个状态机&#xff0c;由&#xff1a;状态、转换、事件和活动组成&#xff0c;是系统的动态视图。 活动(动作) 可以在状态内执行也可以在状态转换(迁移) 时执行。 状态图强调&#xff1a;行为的事件顺序。 1-2、状态图…

【ollama】(4):在autodl中安装ollama工具,配置环境变量,修改端口,使用RTX 3080 Ti显卡,测试coder代码生成大模型

1&#xff0c;ollama项目 Ollama 是一个强大的框架&#xff0c;设计用于在 Docker 容器中部署 LLM。Ollama 的主要功能是在 Docker 容器内部署和管理 LLM 的促进者&#xff0c;它使该过程变得非常简单。它帮助用户快速在本地运行大模型&#xff0c;通过简单的安装指令&#xf…

【考研数学】660/880/1000/1800 使用手册

开门见山&#xff0c;直接介绍几个热门的习题册 660&#xff1a;660表面上叫基础通关660&#xff0c;但实际上很多题的难度并不适合基础阶段&#xff0c;建议在强化阶段搭配着 严选题做660&#xff0c;对提升做小题的速度和能力非常有帮助。 880&#xff1a;题量适中&#xf…

20240312-1-Graph(图)

Graph(图) 在面试的过程中,一般不会考到图相关的问题,因为图相关的问题难,而且描述起来很麻烦. 但是也会问道一下常见的问题,比如,最短路径,最小支撑树,拓扑排序都被问到过. 图常用的表示方法有两种: 分别是邻接矩阵和邻接表. 邻接矩阵是不错的一种图存储结构,对于边数相对顶点…

MooC下载pdf转为ppt后去除水印方法

1、从MooC下载的课件&#xff08;一般为pdf文件&#xff09;可能带有水印&#xff0c;如下图所示&#xff1a; 2、将pdf版课件转为ppt后&#xff0c;同样带有水印&#xff0c;如下图所示&#xff1a; 3、传统从pdf中去除水印方法不通用&#xff0c;未找到有效去除课件pdf方法…

c 语言中指针注意事项

看看下面两个 #include<iostream> using namespace std;int main() {int a 10;char p[6];*((int *)p) *(& a); // 正确写法*p *(&a); // 错误写法cout << *(int*)p; } 把原因写在评论区

飞塔防火墙开局百篇——002.FortiGate上网配置——在路由模式下使用虚拟接口对(virtual-wire-pair)

在路由模式下使用虚拟接口对&#xff08;virtual-wire-pair&#xff09; 拓扑配置接口配置策略 使用方有透明模式下一进一出的这样需求的组网&#xff0c;可以在路由模式下使用虚拟接口对&#xff08;virtual-wire-pair&#xff09;替代。 登陆FortiGate防火墙界面&#xff0c;…

01 THU大模型之基础入门

1. NLP Basics Distributed Word Representation词表示 Word representation: a process that transform the symbols to the machine understandable meanings 1.1 How to represent the meaning so that the machine can understand Compute word similarity 计算词相似度 …

中间件 | RabbitMq - [AMQP 模型]

INDEX 1 全局示意2 依赖 1 全局示意 AMQP&#xff0c;即高级消息队列协议&#xff08;Advanced Message Queuing Protocol&#xff09;&#xff0c;整体架构如下图 producer 发送消息给 rabbit mq brokerrabbit mq broker 分发消息给 consumer消费producer/consumer 都通过 …

Python算法题集_搜索旋转排序数组

Python算法题集_搜索旋转排序数组 题33&#xff1a;搜索旋转排序数组1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【二分法区间判断】2) 改进版一【二分找分界标准二分法】3) 改进版二【递归实现二分法】 4. 最优算法5. 相关资源 本文为Pytho…