vue进度条组件

 <div class="global-mask" v-if="isProgress"><div class="contentBox"><div class="progresstitie">数据加载中请稍后</div><el-progress class="progressStyle" :color="customColor" text-color="#fff" :text-inside="true" :stroke-width="20":percentage=percentage status="success"></el-progress><div class="progressSpan">拼命加载中......</div></div></div>fetchData() {this.percentage += 1if (this.percentage == 99) {clearInterval(this.intervalId)}},//开始的时候执行   this.fetchData     this.isProgress= true
//结束的时候         this.isProgress= false/* 遮罩层样式 */
.global-mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);/* 半透明灰色 */z-index: 9998;/* 确保在内容之上 */
}/* 可选:禁止滚动 */
.mask-active {overflow: hidden;height: 100vh;}.contentBox {width: 40%;margin: 0 auto !important;position: absolute;top: 35%;left: 30%;height: 230px;border-radius: 10px;background-image: url("../../../assets/images/loadingBg.png");background-size: cover;}.progressSpan {color: rgb(64, 158, 255);font-size: 16px;text-align: center;padding: 10px 0;}.progressStyle {width: 80%;margin: 0 auto;
}.progresstitie {font-size: 16px;text-align: center;font-weight: 600;font-size: 20px;line-height: 100px;
}

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

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

相关文章

Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁

一、问题描述 今天小伙伴提了一个bug&#xff0c;在点击列表项的“…”按钮应该出现的悬浮菜单显示不完整&#xff1a; 二、问题排查 一般这种问题&#xff0c;是由于悬浮菜单采用的是绝对定位&#xff0c;而父级采用了overflow:hidden属性。但需要注意的是&#xff0c;这里的…

JavaScript基础--01-JS简介

字面量&#xff1a;数字、字符串、布尔值 前言JavaScript背景Web前端有三层&#xff1a;发展历史JavaScript的发展&#xff1a;蒸蒸日上 JavaScript介绍JavaScript入门易学性JavaScript是脚本语言JavaScript的组成 JavaScript 的特点特点1&#xff1a;解释型语言特点2&#xff…

[leetcode] 面试经典 150 题——篇9:二叉树(番外:二叉树的遍历方式)

二叉树的遍历是指按照某种顺序访问二叉树中的每个节点。常见的遍历方式有四种&#xff1a;前序遍历&#xff08;Pre-order Traversal&#xff09;、中序遍历&#xff08;In-order Traversal&#xff09;、后序遍历&#xff08;Post-order Traversal&#xff09;以及层序遍历&am…

es基本概念

Elasticsearch 的架构与基本概念 Elasticsearch&#xff08;简称 ES&#xff09;是一个开源的分布式搜索和分析引擎&#xff0c;基于 Apache Lucene 构建。它被广泛用于全文搜索、日志分析、实时数据分析等场景。以下是其架构概述及其基本概念的详细解释。 Elasticsearch 的架…

《星环之城:量子迷雾下的网络安全战记》

点击下面图片带您领略全新的嵌入式学习路线 &#x1f525;爆款热榜 88万阅读 1.6万收藏 序章&#xff1a;星环之陨 公元2145年&#xff0c;人类在火星轨道上建造了“星环之城”——一座由量子网络连接的太空城邦。它的中枢AI“盖娅”掌控着地球与殖民地的数据洪流&#xff…

《全栈+双客户端Turnkey方案》架构设计图

今天分享一些全栈双客户端Turnkey方案的架构与结构图。 1&#xff1a;三种分布式部署方案:网关方案&#xff0c;超级服务器单服方案&#xff0c;直连逻辑服方案 2: 单服多线程核心架构: 系统服务逻辑服服务 3: 系统服务的多线程池调度设计 4:LogicServer Update与ECS架构&…

打破界限:Android XML与Jetpack Compose深度互操作指南

在现有XML布局项目中逐步引入Jetpack Compose是现代Android开发的常见需求。本指南将全面介绍混合使用的最佳实践、技术细节和完整解决方案。 一、基础配置 1.1 Gradle配置 android {buildFeatures {compose true}composeOptions {kotlinCompilerExtensionVersion "1.5.3…

React-narice安卓打包流程

**1. 生成签名密钥 在项目的 android/app 目录下生成签名密钥的步骤&#xff1a; 打开终端或命令提示符&#xff1a;导航到您的 React Native 项目的 android/app 目录。 运行以下命令生成密钥库文件&#xff1a; keytool -genkeypair -v -keystore my-release-key.keystor…

嵌入式AI开源生态指南:从框架到应用的全面解析

嵌入式AI开源生态指南&#xff1a;从框架到应用的全面解析 引言 随着人工智能技术的迅速发展&#xff0c;将AI能力部署到边缘设备上的需求日益增长。嵌入式AI通过在资源受限的微控制器上运行机器学习模型&#xff0c;实现了无需云连接的本地智能处理&#xff0c;大幅降低了延…

深度学习中模型量化那些事

在深度学习中模型量化可以分为3块知识点&#xff0c;数据类型、常规模型量化与大模型量化。本文主要是对这3块知识点进行浅要的介绍。其中数据类型是模型量化的基本点。常规模型量化是指对普通小模型的量化实现&#xff0c;通常止步于int8的量化&#xff0c;绝大部分推理引擎都…

Redis-list类型

这里只是介绍命令使用 列表是用来存储多个有序的字符串 可以用来充当栈和队列的角色 列表特点: 列表中的元素是有序的,可以通过索引下标来获取某个元素或者某个范围的元素 获取和删除有区别 元素可以重复 命令 LPUSH 将一个或者多个元素从左侧放入到list中(头插法) lp…

Business English Certificates (BEC) 高频词汇背诵

Business English Certificates {BEC} 高频词汇背诵 References Cambridge English: Business Certificates, also known as Business English Certificates (BEC), are a suite of three English language qualifications for international business. abandon /əˈbndən/ …

第十四届蓝桥杯省赛真题解析(含C++详细源码)

第十四届蓝桥杯省赛 整数删除满分思路及代码solution1 &#xff08;40% 双指针暴力枚举&#xff09;solution 2&#xff08;优先队列模拟链表 AC&#xff09; 冶炼金属满分代码及思路 子串简写满分思路及代码solution 1&#xff08;60% 双指针&#xff09;solution 2&#xff0…

AI Agent开发大全第二十一课-如何开发一个MCP(从0开发一个MCP Client)

开篇 上一章《AI Agent开发大全第二十课-如何开发一个MCP(从0开发一个MCP Server)》里我们讲了如何从0开始开发一个MCP Server。可以看到文中大量细节为MCP发明者官网Claude都不曾或者是遗漏的,而且还有那么多点遗漏,想要真正要在企业生产级环境使用MCP是需要做分布式开发的…

TypeScript面试题集合【初级、中级、高级】

初级面试题 什么是TypeScript&#xff1f; TypeScript是JavaScript的超集&#xff0c;由Microsoft开发&#xff0c;它添加了可选的静态类型和基于类的面向对象编程。TypeScript旨在解决JavaScript的某些局限性&#xff0c;比如缺乏静态类型和基于类的面向对象编程&#xff0c…

无锡无人机驾驶证培训费用

无锡无人机驾驶证培训费用&#xff0c;随着科技的迅速发展&#xff0c;无人机在众多行业中发挥着举足轻重的作用。从影视制作到农业监测&#xff0c;再到物流运输与城市规划&#xff0c;无人机的应用场景不断扩展&#xff0c;因此越来越多的人开始意识到学习无人机驾驶技能的重…

2181、合并零之间的节点

2181、[中等] 合并零之间的节点 1、问题描述&#xff1a; 给你一个链表的头节点 head &#xff0c;该链表包含由 0 分隔开的一连串整数。链表的 开端 和 末尾 的节点都满足 Node.val 0 。 对于每两个相邻的 0 &#xff0c;请你将它们之间的所有节点合并成一个节点&#xff…

相机的曝光和增益

文章目录 曝光增益增益原理主要作用增益带来的影响增益设置与应用 曝光 参考&#xff1a;B站优致谱视觉 增益 相机增益是指相机在拍摄过程中对图像信号进行放大的一种操作&#xff0c;它在提高图像亮度和增强图像细节方面起着重要作用&#xff0c;以下从原理、作用、影响以…

小飞电视 2.7.0 | 高清秒播无卡顿的电视直播软件

小飞电视采用了流行的天光YY壳进行二次开发&#xff0c;内置了热门的肥羊源。更新后在加载速度和播放速度上有了显著提升&#xff0c;并提供了丰富的内容和各种分类栏目&#xff0c;包括4K和8K频道以及经典的直播内容如虎芽、斗鱼、歪歪等。该软件的最大特点是其稳定性和无广告…

【Python爬虫高级技巧】BeautifulSoup高级教程:数据抓取、性能调优、反爬策略,全方位提升爬虫技能!

大家好&#xff0c;我是唐叔&#xff01;上期我们聊了 BeautifulSoup的基础用法 &#xff0c;今天带来进阶篇。我将分享爬虫老司机总结的BeautifulSoup高阶技巧&#xff0c;以及那些官方文档里不会告诉你的实战经验&#xff01; 文章目录 一、BeautifulSoup性能优化技巧1. 解析…