React+TS前台项目实战(十三)-- 全局常用响应式加载动画Loading组件封装

文章目录

  • 前言
  • Loading组件
    • [1. 功能分析](#1. 功能分析)
    • [2. 代码+详细注释](#2. 代码+详细注释)
    • [3. 使用方式](#3. 使用方式)
    • [4. 不同尺寸loading动画效果展示](#4. 不同尺寸loading动画效果展示)
  • 总结

前言

高阶组件有几大优点,其中一个就是渲染劫持,如懒加载,是否显示该元素loading,这在项目中我们经常用到。毫无疑问,这个实战系列我们必然也要用到它,本文主要封装这个loading组件,为了后期开发页面使用。


Loading组件

1. 功能分析

(1)通过size属性,可以自定义加载动画的尺寸

(2)通过传入className属性, 可以自定义加载动画的样式

(3)通过传入imgUrl属性, 可以自定义加载动画的图片

(4)组件使用了 classNames 库来合并样式类名,并且使用了 css模块,和styles 模块中的样式类名来设置弹框的样式

2. 代码+详细注释

c 复制代码
// @/components/Loading/index.tsx
import { FC } from "react";
import classNames from "classnames";
import { LoadingBlock } from "./styled";
import LoadingImage from "@/assets/logo.png";

// 组件的属性类型
type Props = {
  // loading的尺寸
  size?: "small" | "large";
  // 自定义的类名
  className?: string;
  // 自定义的图片地址
  imgUrl?: string;
};

// 动画懒加载组件
const Loading: FC<Props> = ({ size, className, imgUrl }) => (
  <LoadingBlock className={classNames(className)} size={size}>
    <img src={imgUrl ?? LoadingImage} alt="loading" />
  </LoadingBlock>
);

export default Loading;

------------------------------------------------------------------------------
// @/components/Dialog/styled.tsx
import styled, { css } from "styled-components";
import variables from "@/styles/variables.module.scss";

const sizeStyles = {
  small: css`
    width: 100px;
  `,
  large: css`
    width: 300px;
  `,
};

export const LoadingBlock = styled.div<{ size?: "small" | "large" }>`
  margin: 18px 0;
  text-align: center;
  img {
    width: 200px;
    ${({ size }) => size && sizeStyles[size]}
  }
  @media (max-width: ${variables.mobileBreakPoint}) {
    margin: 8px 0;
    img {
      width: 60px;
    }
  }
`;

3. 使用方式

c 复制代码
// 引入组件
import Loading from "@/components/Loading";
// 使用
<Loading size="small" /> {/* 小尺寸loading */}
<Loading /> {/* 默认尺寸loading */}
<Loading size="large" /> {/* 大尺寸loading */}

4. 不同尺寸loading动画效果展示


总结

下一篇讲【布局组件Header组件封装】。关注本栏目,将实时更新。

相关推荐
峥无4 分钟前
HTML 零基础入门到实战:从骨架到页面的完整指南
前端·html
南囝coding10 分钟前
《独立开发者精选工具》
前端·后端·开源
IT_陈寒14 分钟前
JavaScript 性能优化的 7 个致命陷阱:我从 P5 到 P8 的核心突破都在这里!
前端·人工智能·后端
艾小码33 分钟前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..1 小时前
ES6是什么
前端·javascript·es6
Jammingpro3 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05156 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI9 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front10 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie10 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui