Vue2封装自定义全局Loading组件
前言
在开发的过程中,点击提交按钮,或者是一些其它场景总会遇到Loading加载框,PC的一些UI库也没有这样的加载框,无法满足业务需求,因此可以自己自定义一个,实现过程如下。
效果图

如何封装?
第1步:创建要封装成全局组件的文件

<template><div class="loading"v-show="msg.show"><div class="load-box"><!-- 图片放在文末,自行右键另存为 --><img src="@/assets/common/load.png"><span>{{ msg.title }}</span></div></div>
</template><script>
export default {name: 'SelfLoading',props: {msg: {type: Object,default: () => ({show: false,title: '加载中...'})}},methods: {// 显示loading的方法show (title = '加载中...') {this.msg.show = truethis.msg.title = title},// 隐藏loading的方法hide () {this.msg.show = false}}
}
</script><style lang="scss" scoped>
.loading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;display: flex;justify-content: center;align-items: center;z-index: 9999;.load-box {background-color: rgba(0, 0, 0, 0.5);width: 100px;height: 100px;border-radius: 5px;box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.5);color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;letter-spacing: 0.8px;font-size: 13px;img {width: 30px;margin-bottom: 8px;animation: rotate 0.8s linear infinite;}}
}@keyframes rotate {to {transform: rotate(360deg);}
}
</style>
第2步:注册组件
Loading这类的通用组件一般定义为全局组件,那么直接在main.js文件中全局注册。
import SelfLoading from '@/components/Loading'
Vue.component('SelfLoading', SelfLoading)
第3步:使用组件
<template><!-- 全局Loading --><self-loading ref="loadingRef" />
</template><script>
export default {// 仅做示例created () {// 开启全局Loading,不传参默认为 '加载中...'this.$refs.loadingRef.show('上传中...')},// 仅做示例beforeDestroy () {// 隐藏全局Loadingthis.$refs.loadingRef.hide()}
}
</script>
图片在这里
图片右击另存为即可,好像会有CSDN自动添加的水印,不太知道怎么去除,需要原图的可以在评论区留下你的邮箱地址。

相关文章:
Vue2封装自定义全局Loading组件
前言 在开发的过程中,点击提交按钮,或者是一些其它场景总会遇到Loading加载框,PC的一些UI库也没有这样的加载框,无法满足业务需求,因此可以自己自定义一个,实现过程如下。 效果图 如何封装? 第…...
docker 搭建jenkins
1、拉取镜像 docker pull jenkins/jenkins:2.4162、创建文件夹 mkdir -p /home/jenkins_mount chmod 777 /home/jenkins_mount3、运行并构建容器 docker run --restartalways -d -p 10240:8080 -p 10241:50000 -v /home/jenkins_mount:/var/jenkins_home -v /etc/localtime:…...
【Docker】Docker 部署 Mysql 并设置数据持久化
文章目录 1. Docker持久化MySQL2. 测试删除MySQL容器后新建容器,数据还在不在3. 参考资料 我们使用Docker的目的就是图它方便下载部署,不用常规的经历下载、配置、安装等等繁琐的步骤。但是与此同时Docker也存在一些缺点,像删除容器后数据就都…...
【ARM 常见汇编指令学习 5 -- arm64汇编指令 wzr 和 xzr】
文章目录 ARM64 zero registerARMv8 zero 寄存器的背景xzr 在寄存器读写操作中的使用 上篇文章:ARM 常见汇编指令学习 4 – ARM64 比较指令 cbnz 与 b.ne 区别 下篇文章:ARM 常见汇编指令学习 6 - bic(位清除), orr(位或), eor(异或) ARM64 zero registe…...
4.4 成员变量与局部变量的区别有哪些?
文章目录 4.5 创建一个对象用什么运算符?对象实体与对象引用有何不同?4.6 一个类的构造方法的作用是什么? 若一个类没有声明构造方法,该程序能正确执行吗? 为什么?4.7 构造方法有哪些特性?4.8 在调用子类构造方法之前会先调用父类没有参数的构造方法…...
学生管理系统-03项目案例(3)
一、用户列表 1、编写api接口 //导入封装后的axios import {instance} from /util/request export default{getUsers:params>instance.get(/users/getUsers,{params}) } 2、表格渲染 <template><el-card><!-- 当el-table元素中注入data对象数组后&#x…...
Banana Pi BPI-KVM – 基于 Rockchip RK3568 SoC 的 KVM over IP 解决方案
Banana Pi 已经开始开发基于 Rockchip RK3568 SoC 的 BPI-KVM 盒,但它不是迷你 PC,而是 KVM over IP 解决方案,旨在远程控制另一台计算机或设备,就像您在现场一样,例如能够打开和关闭连接的设备、访问 BIOS 等。 商业…...
面试:Spring Cloud和Kubernetes的优缺点
Spring Cloud 优点 spring cloud是从应用框架层面解决微服务架构的一部分,如网关、服务发现、负载平衡、配置管理、指标跟踪等,易于Java开发者上手。 缺点 缺乏打包、持续集成、伸缩、高可用和自我修复等,且局限于Java平台。 Kubernetes …...
TSINGSEE青犀视频安防监控视频平台EasyCVR新增密码复杂度提示
智能视频监控平台TSINGSEE青犀视频EasyCVR可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等,能对外分发RTSP、RTM…...
前端开发中的正则表达式:解密规则的魔法
引言 在前端开发中,正则表达式是一个强大且不可或缺的工具,它可以帮助我们处理和验证字符串数据。无论是表单验证、数据提取还是字符串替换,正则表达式都可以发挥巨大的作用。本篇博客将全面介绍前端开发中的正则表达式,包括基本…...
const的用法
目录 const的基本理解 C和C中const的区别 代码段 不初始化or初始化 常变量or常量 编译方式 备注开发环境:vscode通过ssh连接虚拟机中的ubuntu,ubuntu-20.04.3-desktop-amd64.iso const的基本理解 const修饰的变量不能作为左值 const修饰的变量初…...
机器学习深度学习——模型选择、欠拟合和过拟合
👨🎓作者简介:一位即将上大四,正专攻机器学习的保研er 🌌上期文章:机器学习&&深度学习——多层感知机的简洁实现 📚订阅专栏:机器学习&&深度学习 希望文章对你们有…...
IP 服务级别协议监控
工作场所分布在全球多个地点的企业通过 WAN 链接共享和接收数据,这需要跨广泛的网络位置和路径持续监控网络质量,以实现优化的性能水平和不间断的服务交付。 IP 服务水平协议 IP 服务级别协议 (IP SLA) 是一种网络测量技术&…...
Emvirus: 基于 embedding 的神经网络来预测 human-virus PPIs【Biosafety and Health,2023】
研究背景: Human-virus PPIs 预测对于理解病毒感染机制、病毒防控等十分重要;大部分基于 machine-learning 预测 human-virus PPIs 的方法利用手动方法处理序列特征,包括统计学特征、系统发育图谱、理化性质等;本文作者提出了一个…...
安全文件传输:如何降低数据丢失的风险
在当今数字化时代,文件传输是必不可少的一项工作。但是,数据丢失一直是一个令人头疼的问题。本文将探讨一些减少数据丢失风险的方法,包括加密、备份和使用可信的传输协议等。采取这些措施将有助于保护数据免受意外丢失的危险。 一、加密保护数…...
AI绘画StableDiffusion实操教程:可爱头像奶茶小女孩(附高清图片)
本教程收集于:AIGC从入门到精通教程汇总 今天继续分享AI绘画实操教程,如何用lora包生成超可爱头像奶茶小女孩 放大高清图已放到教程包内,需要的可以自取。 欢迎来到我们这篇特别的文章——《AI绘画StableDiffusion实操教程:可爱…...
java8 GroupingBy 用法大全
java8中,Collectors.groupingBy 会用得比较多,对其常见用法做一个汇总 1,模拟数据 Item import java.math.BigDecimal;public class Item {private String name;private Integer quantity;private BigDecimal price;public Item(String nam…...
vue_router__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor
你所建立的项目 是 vue2x ,但是却下载了 vue-router4x 而 vue-router4x 适用于 vue3x 所以你需要卸载 vue-router4x,重新下载 vue-router3x 卸载: npm uninstall vue-router 安装:(3版本) npm i vue-router3...
前端html2canvas和dom-to-image实现截图功能
目录 需求 历劫过程 截图知识点 html2canvas 文档地址 封装 使用教程 dom-to-image-more 文档地址 封装 使用教程 解决跨域问题 以下是我花了大把时间,薅秃头得出来的最终结果, dom-to-image-more截图时间快到可以让复杂的页面仅需2-3S就能完成截图,内容有点多…...
Hadoop平台集群之间Hive表和分区的导出和导入迁移(脚本)
要编写Shell脚本实现两个Hadoop平台集群之间Hive表和分区的导出和导入迁移 你可以使用Hive的EXPORT和IMPORT命令结合Hadoop的DistCp命令。下面是一个示例脚本: #!/bin/bash# 导出源Hive表的数据到HDFS source_hive_table"source_db.source_table" targe…...
notepad-- Markdown实时预览功能高效使用全攻略
notepad-- Markdown实时预览功能高效使用全攻略 【免费下载链接】notepad-- 一个支持windows/linux/mac的文本编辑器,目标是做中国人自己的编辑器,来自中国。 项目地址: https://gitcode.com/GitHub_Trending/no/notepad-- 作为一款支持Windows、…...
如何快速掌握Subtitle Edit:新手也能上手的完整实战指南
如何快速掌握Subtitle Edit:新手也能上手的完整实战指南 【免费下载链接】subtitleedit the subtitle editor :) 项目地址: https://gitcode.com/gh_mirrors/su/subtitleedit 你是不是经常遇到下载的字幕与视频不同步?或者想要为自制视频添加专业…...
别再乱点默认应用了!麒麟Kylin Desktop V10 SP1默认程序设置,一篇讲清逻辑与重置
麒麟Kylin桌面系统V10 SP1:默认应用管理的深度解析与实战指南 你是否曾在安装WPS或浏览器时,面对系统弹出的默认应用选择窗口随手一点,结果发现.docx文件全被浏览器打开?这种"手滑"操作在麒麟Kylin Desktop V10 SP1系统…...
终极指南:3步告别黑苹果配置噩梦,OpCore Simplify让你轻松搞定OpenCore EFI
终极指南:3步告别黑苹果配置噩梦,OpCore Simplify让你轻松搞定OpenCore EFI 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还…...
多任务学习调参新思路:如何让模型自己决定分类和回归任务谁更重要?
多任务学习中的自适应权重分配:让模型学会动态平衡分类与回归任务 想象一下,你正在训练一个自动驾驶系统,它需要同时完成车辆检测(分类任务)和深度估计(回归任务)。传统方法中,你需要…...
离职见人品:软件测试工程师如何优雅交接,为职业生涯赋能
在职业旅程的每一次转折点,如何“结束”与如何“开始”同等重要。对于软件测试工程师而言,离职远非简单地提交代码、归还电脑那么简单。它更像是一次对个人职业素养、专业精神和人脉网络的集中检阅。一次专业、周到、负责任的交接,不仅能确保…...
Apache Parquet Java性能优化秘籍:5个关键技巧提升读写速度300%
Apache Parquet Java性能优化秘籍:5个关键技巧提升读写速度300% 【免费下载链接】parquet-java Apache Parquet Java 项目地址: https://gitcode.com/gh_mirrors/pa/parquet-java Apache Parquet Java是处理大数据列式存储的终极解决方案,通过合理…...
SAP MTO实战:E+M模式配置与操作全流程避坑指南(含策略组22详解)
SAP MTO实战:EM模式配置与操作全流程避坑指南(含策略组22详解) 当客户需要一台完全定制化的工业设备时,传统库存管理模式往往束手无策。这正是SAP按订单生产(MTO)模式大显身手的场景——特别是其中的EM&…...
别再只调参了!深入DeepSORT的tracker.py:从轨迹管理到状态机,看懂跟踪器如何‘思考’
深入DeepSORT的tracker.py:从轨迹管理到状态机,看懂跟踪器如何‘思考’ 在目标跟踪领域,调试模型时遇到的ID频繁切换、轨迹断裂等问题往往令人头疼。许多开发者虽然能够跑通DeepSORT算法,但当需要针对特定场景优化时,却…...
cv_unet_image-matting图像抠图:5分钟快速部署,小白也能轻松上手
cv_unet_image-matting图像抠图:5分钟快速部署,小白也能轻松上手 1. 引言:为什么选择这个工具? 你是否遇到过这样的烦恼:需要快速抠出一张人像照片,但Photoshop操作太复杂?或者有一批产品图片…...
