当前位置: 首页 > news >正文

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组件

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

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容器后新建容器&#xff0c;数据还在不在3. 参考资料 我们使用Docker的目的就是图它方便下载部署&#xff0c;不用常规的经历下载、配置、安装等等繁琐的步骤。但是与此同时Docker也存在一些缺点&#xff0c;像删除容器后数据就都…...

【ARM 常见汇编指令学习 5 -- arm64汇编指令 wzr 和 xzr】

文章目录 ARM64 zero registerARMv8 zero 寄存器的背景xzr 在寄存器读写操作中的使用 上篇文章&#xff1a;ARM 常见汇编指令学习 4 – ARM64 比较指令 cbnz 与 b.ne 区别 下篇文章&#xff1a;ARM 常见汇编指令学习 6 - bic(位清除), orr(位或), eor(异或) ARM64 zero registe…...

4.4 成员变量与局部变量的区别有哪些?

文章目录 4.5 创建一个对象用什么运算符?对象实体与对象引用有何不同?4.6 一个类的构造方法的作用是什么? 若一个类没有声明构造方法&#xff0c;该程序能正确执行吗? 为什么?4.7 构造方法有哪些特性&#xff1f;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 盒&#xff0c;但它不是迷你 PC&#xff0c;而是 KVM over IP 解决方案&#xff0c;旨在远程控制另一台计算机或设备&#xff0c;就像您在现场一样&#xff0c;例如能够打开和关闭连接的设备、访问 BIOS 等。 商业…...

面试:Spring Cloud和Kubernetes的优缺点

Spring Cloud 优点 spring cloud是从应用框架层面解决微服务架构的一部分&#xff0c;如网关、服务发现、负载平衡、配置管理、指标跟踪等&#xff0c;易于Java开发者上手。 缺点 缺乏打包、持续集成、伸缩、高可用和自我修复等&#xff0c;且局限于Java平台。 Kubernetes …...

TSINGSEE青犀视频安防监控视频平台EasyCVR新增密码复杂度提示

智能视频监控平台TSINGSEE青犀视频EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等&#xff0c;能对外分发RTSP、RTM…...

前端开发中的正则表达式:解密规则的魔法

引言 在前端开发中&#xff0c;正则表达式是一个强大且不可或缺的工具&#xff0c;它可以帮助我们处理和验证字符串数据。无论是表单验证、数据提取还是字符串替换&#xff0c;正则表达式都可以发挥巨大的作用。本篇博客将全面介绍前端开发中的正则表达式&#xff0c;包括基本…...

const的用法

目录 const的基本理解 C和C中const的区别 代码段 不初始化or初始化 常变量or常量 编译方式 备注开发环境&#xff1a;vscode通过ssh连接虚拟机中的ubuntu&#xff0c;ubuntu-20.04.3-desktop-amd64.iso const的基本理解 const修饰的变量不能作为左值 const修饰的变量初…...

机器学习深度学习——模型选择、欠拟合和过拟合

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——多层感知机的简洁实现 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有…...

IP 服务级别协议监控

工作场所分布在全球多个地点的企业通过 WAN 链接共享和接收数据&#xff0c;这需要跨广泛的网络位置和路径持续监控网络质量&#xff0c;以实现优化的性能水平和不间断的服务交付。 IP 服务水平协议 IP 服务级别协议 &#xff08;IP SLA&#xff09; 是一种网络测量技术&…...

Emvirus: 基于 embedding 的神经网络来预测 human-virus PPIs【Biosafety and Health,2023】

研究背景&#xff1a; Human-virus PPIs 预测对于理解病毒感染机制、病毒防控等十分重要&#xff1b;大部分基于 machine-learning 预测 human-virus PPIs 的方法利用手动方法处理序列特征&#xff0c;包括统计学特征、系统发育图谱、理化性质等&#xff1b;本文作者提出了一个…...

安全文件传输:如何降低数据丢失的风险

在当今数字化时代&#xff0c;文件传输是必不可少的一项工作。但是&#xff0c;数据丢失一直是一个令人头疼的问题。本文将探讨一些减少数据丢失风险的方法&#xff0c;包括加密、备份和使用可信的传输协议等。采取这些措施将有助于保护数据免受意外丢失的危险。 一、加密保护数…...

AI绘画StableDiffusion实操教程:可爱头像奶茶小女孩(附高清图片)

本教程收集于&#xff1a;AIGC从入门到精通教程汇总 今天继续分享AI绘画实操教程&#xff0c;如何用lora包生成超可爱头像奶茶小女孩 放大高清图已放到教程包内&#xff0c;需要的可以自取。 欢迎来到我们这篇特别的文章——《AI绘画StableDiffusion实操教程&#xff1a;可爱…...

java8 GroupingBy 用法大全

java8中&#xff0c;Collectors.groupingBy 会用得比较多&#xff0c;对其常见用法做一个汇总 1&#xff0c;模拟数据 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 &#xff0c;但是却下载了 vue-router4x 而 vue-router4x 适用于 vue3x 所以你需要卸载 vue-router4x&#xff0c;重新下载 vue-router3x 卸载&#xff1a; npm uninstall vue-router 安装&#xff1a;(3版本&#xff09; 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命令。下面是一个示例脚本&#xff1a; #!/bin/bash# 导出源Hive表的数据到HDFS source_hive_table"source_db.source_table" targe…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...