使用 ElLoading 组件来实现加载(loading)功能
在 Element Plus 中,你可以使用 ElLoading 组件来实现加载(loading)功能。ElLoading 通常用于在数据加载或某些异步操作进行时,向用户展示一个覆盖整个页面的加载提示。
以下是如何在你的 Vite + Vue 3 + JavaScript 项目中使用 ElLoading 组件的详细步骤。
1. 安装 Element Plus
首先,确保你已经安装了 Element Plus。如果还没有安装,你可以通过以下命令安装:
npm install element-plus --save
2. 引入 Element Plus
在你的 main.js 文件中引入 Element Plus 和它的样式:
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
3. 使用 ElLoading 组件
在你的组件中,你可以使用 ElLoading 组件来显示加载提示。以下是一个示例,展示了如何在 <script setup> 语法中使用 ElLoading。
示例组件:
<template><div><el-button @click="showLoading">Show Loading</el-button><div v-if="loading" class="loading-overlay"><!-- Loading overlay will be managed by ElLoading instance --></div></div>
</template><script setup>
import { ref } from 'vue'
import { ElLoading } from 'element-plus'const loading = ref(false)
let loadingInstance = nullconst showLoading = () => {loading.value = trueloadingInstance = ElLoading.service({lock: true,text: 'Loading...',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'})// Simulate an async operationsetTimeout(() => {loadingInstance.close()loading.value = false}, 3000)
}
</script><style scoped>
.loading-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;align-items: center;justify-content: center;z-index: 9999; /* Ensure it covers other content */
}
/* This class is actually not used since the overlay is managed by ElLoading */
</style>
注意事项
lock: true:这将锁定页面的其他内容,防止用户交互。如果你不需要锁定页面,可以将其设置为false。text:你可以自定义加载提示的文本。spinner:你可以自定义加载图标,Element Plus 提供了多个内置图标,你也可以使用自定义的 SVG 或图片。background:你可以自定义加载背景的颜色和透明度。
4. 处理异步操作
在上面的示例中,我们使用了 setTimeout 来模拟一个异步操作。在实际应用中,你可以将 loadingInstance.close() 放在你的异步操作完成后的回调函数中。
通过以上步骤,你就可以在 Vite + Vue 3 + JavaScript 项目中成功地使用 Element Plus 的 ElLoading 组件来实现加载功能了。
相关文章:
使用 ElLoading 组件来实现加载(loading)功能
在 Element Plus 中,你可以使用 ElLoading 组件来实现加载(loading)功能。ElLoading 通常用于在数据加载或某些异步操作进行时,向用户展示一个覆盖整个页面的加载提示。 以下是如何在你的 Vite Vue 3 JavaScript 项目中使用 El…...
Win10 IDEA连接虚拟机中的Hadoop(HDFS)
获取虚拟机的ip 虚拟机终端输入 ip a关闭虚拟机防火墙 sudo ufw disable修改Hadoop的core-site.xml文件 将localhost修改为虚拟机局域网IP # 位置可能不一样,和Hadoop安装位置有关 cd /usr/local/hadoop/etc/hadoop vim core-site.xmlIDEA 连接 创建Maven项目…...
tp8自带的文件缓存如何配置
TP8自带的缓存是文件缓存。 ThinkPHP6默认的缓存驱动是文件缓存,它将缓存数据存储在应用的runtime目录下的cache目录中。文件缓存适用于单机环境下的应用,对于数据量较小且读写频率较低的应用场景,是一种简单有效的缓存方案。 ThinkPHP8…...
【环境搭建】MAC M1安装ElasticSearch
STEP1 官网下载ES Download Elasticsearch | Elastic,下载mac m1对应版本的es STEP2 进入bin文件夹,执行./elasticSearch 浏览器输入 127.0.0.1:9200 STEP 3 下载对应Kibana版本,Download Kibana Free | Get Started Now | Elastic 出现报错…...
[linux 驱动]网络设备驱动详解
目录 1 描述 2 结构体 2.1 net_device 2.2 sk_buff 2.3 net_device_ops 2.4 ethtool_ops 3 相关函数 3.1 网络协议接口层 3.1.1 dev_queue_xmit 3.1.2 netif_rx 3.1.3 alloc_skb 3.1.4 kfree_skb 3.1.5 skb_put 3.1.6 skb_push 3.1.7 skb_reserve 3.2 网络设备驱…...
【ShuQiHere】 重新定义搜索:本体搜索引擎的时代
🌐 【ShuQiHere】 什么是本体搜索引擎?🤖 本体搜索引擎(Ontological Search Engine, OSE) 是一种基于语义理解和本体结构的智能搜索工具。与传统的关键词搜索不同,本体搜索引擎能够理解搜索背后的深层语义…...
Ruby脚本:自动化网页图像下载的实践案例
随着互联网的快速发展,网页上的内容变得越来越丰富,尤其是图像资源。对于需要大量图像资源的设计师、内容创作者或数据分析师来说,手动下载这些图片不仅耗时耗力,而且效率低下。因此,自动化网页图像下载成为了一个迫切…...
ArcGIS中分区统计栅格值前需要进行投影吗(在投影坐标系下进行吗),为什么?
最近,我接到了一个分区统计栅格数值前需要进行投影,或者说是必须需要在投影坐标系下进行吗的咨询。 答案是不需要刻意去变。 但是他又说他把地理坐标系下分区统计结果与投影坐标系下的分区统计结果分别做了一遍,并进行了对比,两个…...
怎么将视频原声提出来?视频原声提取,让创作更自由
在数字媒体时代,视频已成为我们日常生活和工作中不可或缺的一部分。有时,我们可能想要提取视频中的音频部分,无论是为了制作音频素材、学习语言,还是为了其他创意用途。那么,怎么将视频原声提出来呢?本文将…...
在IDEA里用XDebug调试PHP,断点....
做程序开发,调试必不可少,这里最近用到了PHP,顺便写个关于PHP的调试安装使用: 1、首先是PHP先安装xdebug扩展(还有zend的),这个我的工具是IDEA,所以安装方法也相对简单,如果你是用VSCode等应该也是一样,如下图,找到这个PHP->DEBUG 2、直接点上面的Install XDebug 就可以帮你…...
如何设置 GitLab 密码过期时间?
GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料: 极狐GitLab 60天专业…...
重学SpringBoot3-集成Redis(十二)之点赞功能实现
更多SpringBoot3内容请关注我的专栏:《SpringBoot3》 期待您的点赞👍收藏⭐评论✍ 重学SpringBoot3-集成Redis(十二)之点赞功能实现 1. 点赞功能的场景分析2. 项目环境配置2.1. 依赖引入2.2. Redis 配置 3. 点赞功能的实现3.1. 点…...
Django-rest-framework(DRF)怎么实现Excel文件导出
目录 一、安装openpyxl库 二、openpyxl库介绍 1、工作簿 a、创建工作簿 b、加载工作簿 c、保存工作簿 2、工作表 a、获取工作表 b、创建和删除工作表 c、工作表属性设置 3、单元格 a、获取单元格 b、合并单元格 C、设置单元格样式 三、django集成openpyxl库 一、…...
零基础MySQL数据库入门一天学完
目录 课程介绍数据库的存在意义数据库历史及MySQL简介MySQL安装指南MySQL客户端工具介绍库操作详解表操作指南单表查询技巧多表查询实践MySQL函数速览新增、修改、删除操作索引优化策略视图应用实例事务处理机制数据备份与恢复日常维护与安全建议 1. 课程介绍 本指南旨在为初…...
【CSS Tricks】鼠标滚轮驱动css动画播放,使用js还是css?
目录 引言一、js实现1. 实现思路2. 实现案例3. 看下效果 二、css实现1. 代码修改2. 属性介绍2.1 看下浏览器支持性2.2 常用属性值2.2.1 scroll()2.2.2 view() 三、总结 引言 本篇为css的一个小技巧 页面中的动画效果随着滚轮的转动…...
《Electron 基础知识》设置 Vue 中引用的文件路径别名
vite.renderer.config.mjs 文件中配置 代码第1行,引入 resolve ;代码第 6 - 10 行,设置路径别名,注意没有后缀 /; import { resolve } from pathexport default defineConfig((env) > {return {resolve: {alias: …...
day 20 二叉树 part05
654.最大二叉树 注意类似用数组构造二叉树的题目,每次分隔尽量不要定义新的数组,而是通过下标索引直接在原数组上操作,这样可以节约时间和空间上的开销。 题目链接/文章讲解:代码随想录 lass Solution { private:// 在左闭右开…...
003 Springboot操作RabbitMQ
Springboot整合RabbitMQ 文章目录 Springboot整合RabbitMQ1.pom依赖2.yml配置3.配置队列、交换机方式一:直接通过配置类配置bean方式二:消息监听通过注解配置 4.编写消息监听发送测试5.其他类型交换机配置1.FanoutExchange2.TopicExchange3.HeadersExcha…...
小猿口算脚本
实现原理:安卓adb截图传到电脑,然后用python裁剪获得两张数字图片,使用ddddocr识别数字,比较大小,再用adb命令模拟安卓手势实现>< import os import ddddocr from time import sleep from PIL import Imagedef …...
从 Reno TCP 到 Scalable TCP,HighSpeed TCP
前文 Scalable TCP 如何优化长肥管道 介绍了 Scalable TCP,但联系另一个类似的算法 HighSpeed TCP(简称 HSTCP),就会看到一个类似从 Reno TCP 经 BIC 到 CUBIC 的路线,但采用了不同的策略。 Reno TCP 经 BIC 到 CUBIC 路线的核心在于 “在长…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)
考察一般的三次多项式,以r为参数: p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]; 此多项式的根为: 尽管看起来这个多项式是特殊的,其实一般的三次多项式都是可以通过线性变换化为这个形式…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
