前端Vue自定义加载loading组件 通过设置gif实现loading动画 可用于页面请求前loading

news2024/9/23 7:28:43

随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。

通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率低,降低维护成本。 组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦,其背后还有很多工作来支撑组件化的进行,例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

今天给大家介绍的一款组件是:前端Vue自定义加载loading组件 通过设置gif实现loading动画 可用于页面请求前loading,

效果图如下:

 

format,png

format,png

# cc-gifLoading

#

#### 使用方法

```使用方法

<!-- 自定义加载loading页面 v-if:true显示加载页面 false关闭加载页面 gifSrc:设置gif资源 -->

<cc-gifLoading v-if="true" gifSrc="https://cdn.pixabay.com/animation/2023/05/02/04/29/04-29-03-511_512.gif"></cc-gifLoading>

```

附带下载完整代码地址:https://ext.dcloud.net.cn/plugin?id=13434

 

 

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

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

相关文章

Altermanager安装和使用

1、Altermanager使用 1.1 什么是Alertmanager Alertmanager 与 Prometheus 是相互分离的两个组件&#xff0c;Prometheus 服务器根据报警规则将警报发送给 Alertmanager&#xff0c;然后 Alertmanager 将 silencing、inhibition、aggregation 等消息通过电子邮件、dingtalk …

【每日算法】【219. 存在重复元素 II】

☀️博客主页&#xff1a;CSDN博客主页 &#x1f4a8;本文由 我是小狼君 原创&#xff0c;首发于 CSDN&#x1f4a2; &#x1f525;学习专栏推荐&#xff1a;面试汇总 ❗️游戏框架专栏推荐&#xff1a;游戏实用框架专栏 ⛅️点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd;&…

LabVIEW-Solidworks联合仿真

介绍 NI Softmotion介绍 LabVIEW NI SoftMotion 采用高级功能块API (应用程序接口) 便于编写运动程序&#xff0c;该功能块API基于由PLCopen 定义的 Motion Control Library 。SoftMotion 包括用于直线、弧线和轮廓运动的功能块及用于进行电子传动、电子凸轮等高级运行的功能块…

Oracle 的删除

前言 最近在工作中需要将一台电脑上的 Oracle &#xff0c;删除 Oracle 与删除 MySQL 不太一样&#xff0c;删除 Oracle 还需要删除注册表中的内容&#xff0c;不然重新安装的时候会报错。 关闭服务 win r 开启运行窗口&#xff0c;输入 services.msc 打开服务列表。 将 O…

【Redis故障排查】「连接失败问题排查和解决」带你深入分析一下Redis阻塞原因以及问题排查方案指南

Redis阻塞原因以及问题排查 尽管我们在日常工作中经常使用Redis作为数据库的缓存&#xff0c;以大大减轻数据库压力并提升用户体验&#xff0c;但Redis也可能出现阻塞情况&#xff0c;导致整个系统变慢&#xff0c;进而影响用户体验。 因此&#xff0c;在面对Redis阻塞的情况…

傅里叶变换通俗理解,附python代码

傅里叶变换可以简单理解为用一系列三角函数去拟合一个目标函数。为什么可以用三角函数拟合&#xff1f;因为三角函数 是一组正交基。 先来回顾一下正交的概念&#xff0c;在二维平面坐标系中&#xff0c;与这两个单位向量&#xff0c;正交&#xff08;内积为0&#xff0c;相互…

单机模型并行最佳实践

单机模型并行最佳实践 模型并行在分布式训练技术中被广泛使用。 先前的帖子已经解释了如何使用DataParallel在多个 GPU 上训练神经网络&#xff1b; 此功能将相同的模型复制到所有 GPU&#xff0c;其中每个 GPU 消耗输入数据的不同分区。 尽管它可以极大地加快训练过程&#x…

MySQL的基本操作及实用示例(面试真题老实用了)

一、MySQL基本操作 常用语句 MySQL是一个常用的关系型数据库管理系统&#xff0c;可以用于存储和管理数据。下面是MySQL的一些基本操作&#xff1a; 1. 连接到MySQL服务器&#xff1a; mysql -u username -p 其中&#xff0c;username是你的用户名&#xff0c;执行该命令后会…

【软件分析/静态分析】chapter5 课程07 过程间分析(Interprocedural Analysis)

&#x1f517; 课程链接&#xff1a;李樾老师和谭天老师的&#xff1a; 南京大学《软件分析》课程07&#xff08;Interprocedural Analysis&#xff09;_哔哩哔哩_bilibili 目录 第五章 过程间分析 5.1 为什么需要过程间分析 5.2 Call Graph 5.2.1 调用图的概念 5.2.2 调…

2023 年 GitHub 上最火的 Java 面试宝典正式上线

笔记特点&#xff1a;条理清晰&#xff0c;含图像化表示更加易懂。 内容概要&#xff1a;包括 Java 集合、JVM、多线程、并发编程、设计模式、Spring 全家桶、Java、MyBatis、ZooKeeper、Dubbo、Elasticsearch、Memcached、MongoDB、Redis、MySQL、RabbitMQ、Kafka、Linux、Ne…

Vue实现拖拽鼠标圈选、划区域、框选组件sgRectSelect:矩形区域选中checkbox,并回调相关选中、取消选中的操作

边框线虚线动画效果请参阅边框虚线滚动动画特效_虚线滚动效果_你挚爱的强哥的博客-CSDN博客【代码】边框虚线滚动动画特效。_虚线滚动效果https://blog.csdn.net/qq_37860634/article/details/130507289 碰撞检测原理请前往 原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞…

车载以太网 - SomeIP - 协议用例 - RPC

目录 RPC Protocol specification 1、Cleint和Server端应该为一个服务实例的所有的Methodsevents使用一个TCP连接

AtCoder Regular Contest 163 C. Harmonic Mean(构造 补写法)

题目 t(t<500)组case&#xff0c; 给定一个数n(n<500)&#xff0c;构造一个长为n的数组 思路来源 官方题解 题解 注意到 ... 右边累加&#xff0c;等于1-最后一项&#xff0c;可以把最后一项挪到左边 所以&#xff0c; 1. 当n没有在前面的序列里出现过时&#xf…

centos7.6安装mysql

卸载mariadb 解决安装mysql与mariadb冲突问题&#xff08;卸载干净mariadb&#xff09;_何妨徐行的博客-CSDN博客 安装rpm包前可能需要的命令&#xff1a; yum install openssl-devel用于管理rpm包的工具 yum install lrzsz -y 文件传输缺乏rz 下载安装包 去mysql官网 把…

<Linux开发>驱动开发 -之- Linux I2C 驱动

&#xff1c;Linux开发&#xff1e;驱动开发 -之- Linux I2C 驱动 交叉编译环境搭建&#xff1a; &#xff1c;Linux开发&#xff1e; linux开发工具-之-交叉编译环境搭建 uboot移植可参考以下&#xff1a; &#xff1c;Linux开发&#xff1e; -之-系统移植 uboot移植过程详细…

[MMDetection]VOC数据格式转为COCO数据格式

以下脚本可以根据创建VOC格式数据集转换为COCO数据集 其中文件组织格式如下 VOC2007 ------Annotations ------***********.xml ------***********.xml -------ImageSets ------train.txt ------test.txt -------JPEGImages ------***********.jpg ------***********.jpg CO…

【Spring】SpringBoot参数验证10个技巧

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 前言 1.使用验证注解 2 使用自定义验证注解 3 在服务器端验证 4 提供有意义的错误信息 5 将 i18n 用于错误消息 6 使用分组验证 7 对复杂逻辑使用跨域验证 8 对验证错误使…

通过smtp发送邮件及执行异常解决

在日常中遇到了需要实现一个发送邮件的需求&#xff0c;完成之后记录下实现方法及自己遇到的一些问题及解决办法。 常用SMTP服务相关地址及端口 一、通过javax.mail实现发送邮件 1.引入相关坐标 <!-- 发送邮件--><dependency><groupId>org.projec…

矩阵系统源码智能回复私信场景开发

抖音矩阵系统源码智能回复私信场景开发 一、要想开发私信功能开发者需要准备的工作 开发者需要先对接官方api接口以及去申请api提交审核&#xff0c;目前需要了解官方对开发者对该能力开发权限的功能符合开发需求&#xff0c;其次需要了解官方私信触达的规则 1.申请流程&…

基于GPT构建单细胞多组学基础模型

生成式预训练模型在自然语言处理和计算机视觉等各个领域取得了显著的成功。特别是将大规模多样化的数据集与预训练的Transformer相结合&#xff0c;已经成为开发基础模型的一种有前途的方法。文本由单词组成&#xff0c;细胞可以通过基因进行表征。这种类比启发作者探索细胞和基…