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组件封装】。关注本栏目,将实时更新。

相关推荐
汤姆Tom14 小时前
现代 CSS 架构与组件化:构建可扩展的样式系统
前端·css
偷光14 小时前
浏览器中的隐藏IDE: Console (控制台) 面板
开发语言·前端·ide·php
时间的情敌14 小时前
对Webpack的深度解析
前端·webpack·node.js
拜无忧14 小时前
【案例】可视化模板,驾驶舱模板,3x3,兼容移动
前端·echarts·数据可视化
濮水大叔14 小时前
AOP编程有三大场景:控制器切面,内部切面,外部切面,你get到了吗?
typescript·node.js·nestjs
向葭奔赴♡14 小时前
前端框架学习指南:提升开发效率
前端·javascript·vue.js
小高00714 小时前
🔥🔥🔥Vue 3.5 核弹级小补丁:useTemplateRef 让 ref 一夜失业?
前端·javascript·vue.js
小许哥15 小时前
如何把微信小程序转换成支付宝小程序
前端
汤姆Tom15 小时前
CSS 最佳实践与规范
前端·css