介绍

首先，在布局这方面而言，我觉得作为前端人员，应该不需要做过多的解释

有一种布局是响应式布局，大概的意思就是将一套代码同时运行在 PC App 平板三个主要的设备，当时这是很流行的布局，但现在而言，App与PC的差异还是蛮大的，所以现在PC与APP的页面布局等差异还是蛮大的，所以现在一般来说会分开写的~~

做过移动端的人都知道，手机的屏幕大小可能会影响页面的布局，同理，PC端也存在响应的问题，所以我们需要将页面组件尽量写为响应式，至少不要看着特别难受~~~

大家可以参考 Row Col 和 ProCard

在线演示：响应式列表

功能

当你有以下需求时，可以试试这个组件：

  • 列表展示模块，类似卡片的模块
  • 介绍产品的列表

代码演示

功能演示

PC端

image.png

平板

image.png

移动端

image.png

具体代码

文件位置：src/components/Card/CardLayout.tsx

全局配置文件：src/utils/Setting/CardSy

  1. import ProCard from '@ant-design/pro-card';
  2. import { CardSy } from '@/utils/Setting';
  3. import type { CardLayoutProps } from './interface';
  4. import './index'
  6. /**
  7.  * @module CardLayOut 卡片布局
  8.  *
  9.  * @param list  数据的列表，可以是对象也可以是节点，如果是对象，则必须加入render，在render中做为内容，并且可以配置ProCard其他属性，
  10.  * @param type 一行显示的数量， 目前有 2 3 4 6 8，会更具页面的大小自动换行，默认为2
  11.  * @param 其他的ProCard布局
  12.  * @param _config 通知设置子组件的属性
  13.  * @param height 设置统一高度
  14.  */
  16. const CardLayout: React.FC<CardLayoutProps> = ({ list = [], type = 2, _config={}, ...props }) => {
  18.   const colSpan = type === 8 ? colSpanEight : type === 3 ? colSpanThree : type === 4 ? colSpanFour : type === 6 ? colSpanSix : colSpanTwo
  21.   return (
  22.     <ProCard gutter={[24, 24]} ghost {...props} wrap>
  23.       {list.map((item, index) => {
  24.         const { render, ...propsList } = item;
  25.         return (
  26.           <ProCard
  27.             className="CardLayoutChildrenSy"
  28.             key={'WrapProCard' + index}
  29.             {...CardSy.Layout}
  30.             {..._config}
  31.             {...propsList}
  32.             colSpan={colSpan}
  33.           >
  34.             {item.render ? item.render : item}
  35.           </ProCard>
  36.         );
  37.       })}
  38.     </ProCard>
  39.   );
  40. };
  42. export default CardLayout;
  45. const colSpanTwo = {
  46.   xs: 24,
  47.   sm: 24,
  48.   md: 24,
  49.   lg: 24,
  50.   xl: 12,
  51. };
  53. const colSpanThree = {
  54.   xs: 24,
  55.   sm: 12,
  56.   md: 12,
  57.   lg: 12,
  58.   xl: 8,
  59. };
  61. const colSpanFour = {
  62.   xs: 24,
  63.   sm: 12,
  64.   md: 12,
  65.   lg: 12,
  66.   xl: 6,
  67. };
  69. const colSpanSix = {
  70.   xs: 24,
  71.   sm: 12,
  72.   md: 12,
  73.   lg: 12,
  74.   xl: 4,
  75. };
  77. const colSpanEight = {
  78.   xs: 24,
  79.   sm: 12,
  80.   md: 6,
  81.   lg: 6,
  82.   xl: 3,
  83. };

特殊说明

  • 此处的布局结合 ProCard 进行的，如果有什么好的修改，可根据自己的项目进行样式的配置等