Ant-Design源码分析——Skeleton（二）

最新推荐文章于 2024-08-07 09:07:20 发布

Nine-Theta

最新推荐文章于 2024-08-07 09:07:20 发布

阅读量438

点赞数

文章标签：前端 vue.js html

本文链接：https://blog.youkuaiyun.com/qq_46025739/article/details/122070510

版权

2021SC@SDUSC

paragraph部分

接口部分，定义了一些变量

export interface SkeletonParagraphProps {
  // 前缀
  prefixCls?: string;
  // 类名
  className?: string;
  // 样式
  style?: React.CSSProperties;
  // 宽度
  width?: widthUnit | Array<widthUnit>;
  // 列数
  rows?: number;
}

const Paragraph = (props: SkeletonParagraphProps) => {
  // 一个返回宽度的函数，输入第几列，返回该列宽度
  const getWidth = (index: number) => {
    const { width, rows = 2 } = props;
    if (Array.isArray(width)) {
      return width[index];
    }
    // last paragraph
    if (rows - 1 === index) {
      return width;
    }
    return undefined;
  };
  const { prefixCls, className, style, rows } = props;
  const rowList = [...Array(rows)].map((_, index) => (
    // eslint-disable-next-line react/no-array-index-key
    <li key={index} style={