React-View-UI组件库封装Loading加载中源码

news2025/11/1 7:23:12
目录
  • 组件介绍
  • Loading API能力
  • 组件源码
  • 组件测试源码
  • 组件库线上地址

组件介绍

Loading组件是日常开发用的很多的组件，这次封装主要包含两种状态的Loading，旋转、省略号，话不多说先看一下组件的文档页面吧：

正在上传…重新上传取消

Loading API能力

组件一共提供了如下的API能力，可以在使用时更灵活：

  1. type表示loading类型，默认是default，当用户需要使用省略样式，设置type=dot即可；
  2. mask配置蒙层，可在loading时遮挡覆盖内容为半透明状态，适用于内容未加载时的遮盖；
  3. loadingText配置加载文字，在图标下显示；
  4. icon配置自定义图标，可配置自己所需要的Icon或svg图标；
  5. width配置自定义宽度；
  6. height配置自定义高度；
  7. style配置loading整体自定义样式；

组件源码

index.tsx:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

import React, { FC, useEffect, useRef, useState, Fragment, useMemo } from 'react';

import { LoadingProps } from './interface';

import './index.module.less';

const Loading: FC<LoadingProps> = (props) => {

  const {

    type = 'default',

    mask = false,

    loadingText,

    icon,

    width = '2em',

    height = '2em',

    style = {},

  } = props;

  const timer = useRef<any>(null);

  const [activeDotIndex, setActiveDotIndex] = useState(0);

  useEffect(() => {

    timer.current = setInterval(() => {

      setActiveDotIndex((old) => {

        if (old === 2) {

          old = 0;

        } else {

          old++;

        }

        return old;

      });

    }, 500);

    return () => {

      clearInterval(timer.current);

    };

  }, []);

  const loadingStyle = useMemo(() => {

    const returnStyle = style;

    returnStyle.width = width;

    returnStyle.height = height;

    return returnStyle;

  }, [width, height, style]);

  return (

    <Fragment>

      {mask && <div className="dialog" />}

      {type === 'default' ? (

        <div className="loading" style={loadingStyle}>

          <div className="loading-container">

            {icon || (

              <svg

                fill="none"

                stroke="currentColor"

                stroke-width="4"

                width={width}

                height={height}

                viewBox="0 0 48 48"

                aria-hidden="true"

                focusable="false"

              >

                <path d="M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6"></path>

              </svg>

            )}

          </div>

          {loadingText && <div className="text">{loadingText}</div>}

        </div>

      ) : (

        <div className="dot-loading">

          {new Array(3).fill('').map((item, index) => {

            return <div className={activeDotIndex === index ? 'dot-active' : 'dot'}>{item}</div>;

          })}

        </div>

      )}

    </Fragment>

  );

};

export default Loading;

组件测试源码

loading.test.tsx:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

import React from 'react';

import Loading from '../../Loading/index';

import Enzyme from '../setup';

import mountTest from '../mountTest';

import ReactDOM from 'react-dom';

const { mount } = Enzyme;

let container: HTMLDivElement | null;

mountTest(Loading);

describe('loading', () => {

  beforeEach(() => {

    container = document.createElement('div');

    document.body.appendChild(container);

  });

  afterEach(() => {

    document.body.removeChild(container as HTMLDivElement);

    container = null;

  });

  it('test loading show correctly', () => {

    //测试基础加载

    const loading = mount(<Loading />);

    expect(loading.find('.loading .loading-container svg')).toHaveLength(1);

    expect(loading.find('.loading .text')).toHaveLength(0);

  });

  it('test dot loading show correctly', () => {

    //测试省略号加载

    const loading = mount(<Loading type="dot" />);

    expect(loading.find('.dot-loading')).toHaveLength(1);

  });

  it('test mask loading has dialog', () => {

    //测试加载蒙层

    const loading = mount(<Loading mask />);

    expect(loading.find('.dialog')).toHaveLength(1);

  });

  it('test mask loading has dialog', () => {

    //测试加载蒙层

    const loading = mount(<Loading loadingText="test loading" />);

    expect(loading.find('.loading .text').text()).toBe('test loading');

  });

  it('test diffenent size loading show correctly', () => {

    //测试不同大小loading、loading自定义样式

    const component = <Loading width="3em" height="3em" style={{ marginLeft: '100px' }} />;

    ReactDOM.render(component, container);

    const loadingDom = container?.querySelector('.loading');

    expect(

      loadingDom?.getAttribute('style')?.includes('margin-left: 100px; width: 3em; height: 3em;'),

    );

    const svgDom = loadingDom?.querySelector('svg');

    expect(

      svgDom?.getAttribute('width') === '3em' && svgDom?.getAttribute('height') === '3em',

    ).toBe(true);

  });

});

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

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

相关文章

掌握imgproc组件：opencv-图像变换

掌握imgproc组件：opencv-图像变换

图像变换 1. 基于OpenCV的边缘检测1.1 边缘检测的一般步骤1.2 canny算子1.2.1 Canny边缘检测步骤&#xff1a;1.2.2 Canny边缘检测&#xff1a;Canny()函数1.2.3 Canny边缘检测案例 1.3 sobel算子1.3.1 sobel算子的计算过程1.3.2 使用Sobel算子&#xff1a;Sobel()函数1.3.3 示…
阅读更多...
模拟高并发下RabbitMQ的削峰作用

模拟高并发下RabbitMQ的削峰作用

在并发量很高的时候&#xff0c;服务端处理不过来客户端发的请求&#xff0c;这个时候可以使用消息队列&#xff0c;实现削峰。原理就是请求先打到队列上&#xff0c;服务端从队列里取出消息进行处理&#xff0c;处理不过来的消息就堆积在消息队列里等待。 可以模拟一下这个过…
阅读更多...
生态+公链：中创面向未来的区块链建设!

生态+公链：中创面向未来的区块链建设!

未来的区块链市场&#xff0c;一定属于能够将区块链技术与应用完美结合在一起的产品。从互联网的发展历程来看&#xff0c;最后的竞争往往会集中到生态与兼容性。 如何将区块链的落地和应用更加有机地结合在一起&#xff0c;从而让区块链的功能和作用得到最大程度的发挥&#…
阅读更多...
机器学习8：特征组合-Feature Crosses

机器学习8：特征组合-Feature Crosses

特征组合也称特征交叉&#xff08;Feature Crosses&#xff09;&#xff0c;即不同类型或者不同维度特征之间的交叉组合&#xff0c;其主要目的是提高对复杂关系的拟合能力。在特征工程中&#xff0c;通常会把一阶离散特征两两组合&#xff0c;构成高阶组合特征。可以进行组合的…
阅读更多...
css：去除input和textarea默认边框样式并美化

css：去除input和textarea默认边框样式并美化

input input默认样式和focus样式 参考element-ui的css&#xff0c;可以实现如下效果 实现代码 <style>/* 去除默认样式 */input {border: none;outline: none;padding: 0;margin: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none;background-im…
阅读更多...
ElasticSearch 8.0+ 版本Windows系统启动

ElasticSearch 8.0+ 版本Windows系统启动

下载地址&#xff1a;https://www.elastic.co/cn/downloads/past-releases/winlogbeat-8-8-1 解压\elasticsearch\elasticsearch-8.5.1 进入bin目录&#xff0c;启动elasticsearch.bat 问题1&#xff1a; warning: ignoring JAVA_HOMED:\jdk1.8.0_271; using bundled JDK J…
阅读更多...
使用凌鲨连接SSH服务器

使用凌鲨连接SSH服务器

SSH&#xff08;Secure Shell&#xff09;是一种加密的网络协议&#xff0c;用于安全地连接远程服务器。它提供了一种安全的通信方式&#xff0c;使得用户可以在不受干扰的情况下远程访问服务器。SSH协议的加密技术可以保护用户的登录信息和数据传输过程中的安全性。 SSH对于服…
阅读更多...
伦敦银同业拆借利率查询

伦敦银同业拆借利率查询

伦敦银同业拆借利率&#xff08;London InterBank Offered rate&#xff09;简称Libor&#xff0c;它是伦敦银业之间在货币市场的无担保借贷利率&#xff0c;主要报价有五种币别&#xff1a;美元、欧元、英镑、日圆、瑞士法郎&#xff0c;分别有隔夜、一周、一个月、两个月、三…
阅读更多...
密码学—Vigenere破解Python程序

密码学—Vigenere破解Python程序

文章目录 概要预备知识点学习整体流程技术名词解释技术细节小结代码 概要 破解Vigenere需要Kasiski测试法与重合指数法的理论基础 具体知识点细节看下面这两篇文章 预备知识点学习 下面两个是结合起来使用猜测密钥长度的&#xff0c;只有确认了密钥长度之后才可以进行破解。 …
阅读更多...
Jupyter Notebook左侧大纲目录设置

Jupyter Notebook左侧大纲目录设置

在 Jupyter Notebook 中&#xff0c;可以通过安装jupyter_contrib_nbextensions插件来实现在页面左边显示大纲的功能。 1. 安装插件 pip install jupyter_contrib_nbextensions 1.1 如何安装 windows cmd小黑裙窗口&#xff1b; 1.查看目前安装了哪些库 conda list 2. 使用…
阅读更多...
【Oracle】springboot连接Oracle写入blob类型图片数据

【Oracle】springboot连接Oracle写入blob类型图片数据

目录 一、表结构二、mapper 接口和sql三、实体类四、controller五、插入成功后的效果 springboot连接Oracle写入blob类型图片数据 一、表结构 -- 创建表: student_info 属主: scott (默认当前用户) create table scott.student_info (sno number(10) constraint pk_si…
阅读更多...
Vue3 完整项目搭建 Vue3+Pinia+Vant3/ElementPlus+typerscript

Vue3 完整项目搭建 Vue3+Pinia+Vant3/ElementPlus+typerscript

❤ Vue3 项目 1、Vue3+Pinia+Vant3/ElementPlus+typerscript环境搭建 1、安装 Vue-cli 3.0 脚手架工具 npm install -g @vue/cli2、安装vite环境 npm init @vitejs/app报错 使用： yarn create @vitejs/app依然报错 转而使用推荐的： npm c
阅读更多...
Redisson分布式锁原理

Redisson分布式锁原理

1、Redisson简介 一个基于Redis实现的分布式工具&#xff0c;有基本分布式对象和高级又抽象的分布式服务&#xff0c;为每个试图再造分布式轮子的程序员带来了大部分分布式问题的解决办法。 2、使用方法 引入依赖 <dependency><groupId>org.springframework.bo…
阅读更多...
基于Python所写的Word助手设计

基于Python所写的Word助手设计

点击以下链接获取源码资源&#xff1a; https://download.csdn.net/download/qq_64505944/87959100?spm1001.2014.3001.5503 《Word助手》程序使用说明 在PyCharm中运行《Word助手》即可进入如图1所示的系统主界面。在该界面中&#xff0c;通过顶部的工具栏可以选择所要进行的…
阅读更多...
阿里云顺利通过云原生中间件成熟度评估

阿里云顺利通过云原生中间件成熟度评估

前言&#xff1a; 2023 年 6 月 6 日&#xff0c;由中国信息通信研究院&#xff08;以下简称“中国信通院”&#xff09;承办的“ICT中国2023 高层论坛-云原生产业发展论坛”在北京召开&#xff0c;会上正式发布了一系列云原生领域评估结果。阿里云计算有限公司&#xff08;以…
阅读更多...
图解红黑树

图解红黑树

gitee仓库&#xff1a;https://gitee.com/WangZihao64/data-structure-and-algorithm/tree/master/RBTree 目录 概念红黑树的性质红黑树的调整规则 概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或Bl…
阅读更多...
Redis设计与实现笔记之字典

Redis设计与实现笔记之字典

1.字典的实现 Redis中字典使用的哈希表结构 typedef struct dictht {// 哈希表数组dictEntry **table;// 哈希表大小unsigned long size;// 哈希表大小掩码&#xff0c;用于计算索引值// 总是等于 size - 1unsigned long sizemask;// 该哈希表已有节点的数量unsigned long use…
阅读更多...
3D web可视化工具HOOPS Communicator与Autodesk的对比分析

3D web可视化工具HOOPS Communicator与Autodesk的对比分析

越来越多的开发人员转向基于Web的2D和3D可视化和交互服务。这些使您只需使用网络浏览器即可快速向同事、客户或其他任何人展示设计。该领域的工具提供了大量功能&#xff0c;这些功能可能适合也可能不适合您的特定开发需求。 HOOPS Communicator的原始开发人员之一分享了对该市…
阅读更多...
chatgpt赋能python：Python输出NaN的原因及解决方法

chatgpt赋能python：Python输出NaN的原因及解决方法

Python输出NaN的原因及解决方法 NaN&#xff08;Not a Number&#xff09;是一种特殊的数值类型&#xff0c;表示不是一个数字。在Python中&#xff0c;当某种计算结果无法表示为有限数字时&#xff0c;就会输出NaN。本文将介绍Python中输出NaN的原因&#xff0c;并提供一些解…
阅读更多...
python: more Layer Architecture and its Implementation in Python

python: more Layer Architecture and its Implementation in Python

sql server: --学生表 DROP TABLE DuStudentList GO create table DuStudentList (StudentId INT IDENTITY(1,1) PRIMARY KEY,StudentName nvarchar(50),StudentNO varchar(50), --学号StudentBirthday datetime --学生生日 ) go mod…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023