使用 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 路线的核心在于 “在长…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
MMaDA: Multimodal Large Diffusion Language Models
CODE : https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA,它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
反射获取方法和属性
Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
