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

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

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

今天给大家介绍的一款组件是:前端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.hqwc.cn/news/20528.html

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

相关文章

NAS私有云存储 - 搭建Nextcloud私有云盘并公网远程访问

文章目录 摘要视频教程1. 环境搭建2. 测试局域网访问3. 内网穿透3.1 ubuntu本地安装cpolar3.2 创建隧道3.3 测试公网访问 4 配置固定http公网地址4.1 保留一个二级子域名4.1 配置固定二级子域名4.3 测试访问公网固定二级子域名 摘要 Nextcloud,它是ownCloud的一个分支,是一个文…

今日分享——语音同声翻译软件

安娜和卡洛是一对在旅行时偶遇的年轻男女&#xff0c;他们互有好感&#xff0c;但他们来自不同的国家&#xff0c;说着不同的语言。每次面对彼此的时候&#xff0c;他们总是陷入语言的困扰&#xff0c;无法用自己熟悉的语言表达内心的情感。因此他俩都十分需要一款翻译语音的软…

使用STM32 再实现感应开关盖垃圾桶

硬件介绍 SG90舵机 如上图所示的舵机SG90&#xff0c;橙线对应PWM信号&#xff0c;而PWM波的频率不能太高&#xff0c;大约50Hz&#xff0c;即周期0.02s&#xff0c;20ms左右。 在20ms的周期内&#xff0c;高电平占多少秒和舵机转到多少度的关系如下&#xff1a; 0.5ms-----0度…

软件进行压力测试的主要目的

软件进行压力测试是指通过模拟大量用户访问和负载压力&#xff0c;在正常和峰值使用情况下对软件系统进行测试的过程。软件进行压力测试的主要目的是确保软件在实际应用中能够稳定、可靠地运行&#xff0c;满足用户的需求。 首先&#xff0c;软件进行压力测试的主要目的是评估系…

小程序页面顶部标题栏、导航栏navigationBar如何隐藏、变透明?

在app.json中的 "window"下面追加一行 "navigationStyle": "custom" 小程序顶部的白色背景条就不见了&#xff0c;直接变透明&#xff0c;只剩下右上角的胶囊按钮 警告&#xff1a; 如果页面有 <web-view src"{{src}}" /> …

8年资深测试总结,性能测试+性能优化(详细)进军高级测试...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 性能优化常见概念…

小程序开发:必须掌握的 HTML、CSS 和 JavaScript 技术

引言 小程序是一种轻量级的应用程序&#xff0c;通过HTML、CSS和JavaScript等前端技术开发&#xff0c;可在移动设备上直接访问和使用&#xff0c;无需下载和安装。 文章目录 引言一、小程序开发的背景和重要性二、HTML、CSS和JavaScript在小程序开发中的作用三、HTML基础知识1…

靶场的安装

sqli-lab 1.将安装包解压放到WWW目录下 2.修改 db-creds.inc文件里面的数据库的用户名密码为自己的用户名密码 路径&#xff1a;D:\phpStudy_64\phpstudy_pro\WWW\sqli-labs-master\sql-connections\db-creds.inc 3. 更改php版本位5.9版本&#xff0c;不然会报错 4.安装数…

物联网会是下一个支柱产业吗?

近年来&#xff0c;物联网 (IoT) 无疑已成为一个重要且快速增长的行业。尽管绝对确定地预测未来具有挑战性&#xff0c;但许多专家和分析师认为&#xff0c;物联网有潜力成为支柱产业&#xff0c;对各个行业产生变革性影响。 物联网是指由可以收集、交换和分析数据的互连设备、…

SpringBoot第25讲:SpringBoot对TypeHandler的使用

SpringBoot第25讲&#xff1a;SpringBoot对TypeHandler的使用 本文是SpringBoot第25讲&#xff0c;SpringBoot对TypeHandler的使用&#xff0c;TypeHandler就是当SpringBoot 实体类中字段类型和数据库中字段类型不一致时进行使用。 文章目录 SpringBoot第25讲&#xff1a;Sprin…

ELK-日志服务【logstash-安装与使用】

目录 【1】安装logstash logstash input 插件的作用与使用方式 【2】input --> stdin插件&#xff1a;从标准输入读取数据&#xff0c;从标准输出中输出内容 【3】input -- > file插件&#xff1a;从文件中读取数据 【4】input -- > beat插件&#xff1a;从filebe…

MongoDB 事务与数据落盘

文章目录 概要一、持久性1.1、journal log刷盘机制1.2、数据刷盘机制1.3、复制集下的写安全机制 二、隔离性总结 概要 MongoDB并不像MySQL一样天然支持多文档事务&#xff0c;其演变过程如下&#xff1a; MongoDB4.0之前只支持单文档事务&#xff0c;在单个文档上支持ACID原子…