前端基础向--从项目入手封装公共组件

本文就从 “详情卡片” 业务组件的封装的几个阶段来说明我在编写公共组件的设计思路。

1. 阶段一：基础需求

假设我们现在有这样一个需求：需要满足显示产品的详细信息；需要可以根据不同分辨率适配不同的显示方式（2列，3列，4列）。基础样式如下：

为了快速实现不同分辨率实现不同的列数，最先想到的就是使用 UI 库的布局组件，这里我们选择的是 ElementUI 的 Row/Col 组件。

在满足当前的需求下的代码如下：

 
1
2
3
4
5
6
7
8
9
10
11

此时的组件仅仅满足传入一个配置对象 prop 和详情数据 details，以及一个默认的 ElRow 的布局配置。在 Value 长度大于 32 时使用 Tooltip 来显