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…...
BNO055传感器IIC地址冲突?手把手教你修改PS引脚配置
BNO055传感器I2C地址冲突解决方案:PS引脚配置实战指南 在机器人、无人机等需要多传感器协同工作的项目中,BNO055作为一款高性能9轴惯性测量单元(IMU)被广泛使用。但当多个BNO055传感器通过I2C总线连接时,默认地址冲突问题常常让开发者头疼不已…...
串口通讯参数设置全解析:从波特率到流控制的完整配置流程
串口通讯参数设置全解析:从波特率到流控制的完整配置流程 在嵌入式系统和硬件调试领域,串口通讯就像设备间的"普通话",而参数配置则是确保双方能顺畅交流的语法规则。想象一下,当你需要让树莓派与传感器"对话&quo…...
离职见人品:软件测试工程师如何优雅交接,为职业生涯赋能
在职业旅程的每一次转折点,如何“结束”与如何“开始”同等重要。对于软件测试工程师而言,离职远非简单地提交代码、归还电脑那么简单。它更像是一次对个人职业素养、专业精神和人脉网络的集中检阅。一次专业、周到、负责任的交接,不仅能确保…...
Qwen3.5-2B保姆级教程:20亿参数模型端侧部署与图文对话实操
Qwen3.5-2B保姆级教程:20亿参数模型端侧部署与图文对话实操 1. 模型简介 Qwen3.5-2B是阿里云推出的轻量化多模态基础模型,属于Qwen3.5系列的小参数版本(20亿参数)。这个模型专为低功耗、低门槛部署场景设计,特别适合在端侧和边缘设备上运行…...
Multisim新手必看:用差分放大电路课设,手把手教你搞定仿真与波形分析
Multisim新手必看:用差分放大电路课设,手把手教你搞定仿真与波形分析 第一次打开Multisim时,满屏的元器件和复杂的参数设置确实容易让人望而生畏。记得我大三做模电课设时,光是找齐差分放大电路需要的元件就花了半小时,…...
Windows 11终极优化指南:用Win11Debloat实现系统加速51%的免费方案
Windows 11终极优化指南:用Win11Debloat实现系统加速51%的免费方案 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to decl…...
从Windows玩家到Linux新手:我的Ubuntu 22.04双系统入坑实录与软件生态迁移心得
从Windows玩家到Linux新手:我的Ubuntu 22.04双系统入坑实录与软件生态迁移心得 第一次看到Ubuntu的紫色登录界面时,我盯着那个不断旋转的加载动画发了五分钟呆——作为用了十五年Windows的老用户,这个瞬间仿佛打开了新世界的大门。但兴奋感很…...
番茄小说下载器:打造个人数字图书馆的完整攻略
番茄小说下载器:打造个人数字图书馆的完整攻略 【免费下载链接】Tomato-Novel-Downloader 番茄小说下载器不精简版 项目地址: https://gitcode.com/gh_mirrors/to/Tomato-Novel-Downloader 你是否曾遇到过网络信号不佳时无法追更小说的烦恼?或者希…...
Windows HEIC缩略图插件:系统级集成架构深度解析
Windows HEIC缩略图插件:系统级集成架构深度解析 【免费下载链接】windows-heic-thumbnails Enable Windows Explorer to display thumbnails for HEIC files 项目地址: https://gitcode.com/gh_mirrors/wi/windows-heic-thumbnails 在跨平台数字内容管理日益…...
2026别墅地下室保养升值的最好方法:电渗透技术的应用
别墅地下室随着人们日益增长的生活质量,功能也逐渐变得丰厚。当今时代不少业主都会在地下室加装健身房,酒窖以及影视厅等。这些功能区建设完毕初期给人无不良影响,但是随着时间的渐长,湿气不断渗透,首先空气潮湿度会给…...
