【Vue3+TypeScript】CRM系统项目搭建之 — 关于如何设计出优质的 Vue 业务组件

前言

前面知道了 Element Plus 关于组件设计时使用 CSS 变量来进行重构，接着这里就在正式进入业务开发之前，来学习如何在封装组件时在其可拓展性与贴合业务去寻找一个平衡点。

这是来自 B 站 up 主的分享，在上水课的时候偶然刷到的，就决定学习学习。

组件设计基本原则

1. 组件是要去复用到很多地方的,所以设计组件最核心的就是在其可拓展和贴合业务之间找一个平衡点,使得业务组件更加偏向业务，而基础组件更加偏向于拓展。
   
2. 尽量提供简便，满足大多数场景下 0 配置或极少配置就可用，特殊场景也可以拓展自定义。
   

UI 组件展示

如上可以看到这个商品组件在不同的地方会有不同的展示，寻找不同之处，右下角的按钮、商品内容区、商品的标题展示也有所不同、最右边的可选框也有不同。

分解 UI 结构

图片区分析

图片统一问题

1. 图片大小控制，图片的大小是写死，还是交由外部进行控制，外部又如何进行控制呢？
2. 统一的兜底图，可能有些图片是没有传入的，这里又属于是商品展示项，是不是需要一个兜底图呢？
3. 图片地址，这个图片地址是从传入的商品信息对象提取地址吗？

专门思考的问题

1. 以后是否有图片需要加上 icon，加标注的可能呢？
2. 图片的兜底图是否会有替换的可能呢？

图片区方案

1. 图片大小默认按设计图来，如果有特殊需要走css调控，组件css层级设计的浅一点
2. 统一兜底图，留出兜底图自定义控件
3. 默认显示一张图片，如有特殊需要，支持插槽替换

1. 地址不单独传入直接传入整体商品信息，组件内部提取地址，也预留props可以强制定义url地址

具体代码设计

标题区

问题分析

1. 标题字体大小，字体样式是否固定
2. 标题有时候两行省略，有时候一行省略如何控制
3. 标题内容如何处理

标题区解决方案

1. 按额外内容区有几条决定标题几行，等于四条就一行，小于等于三条显示两行，预留props可以强制指定几行
2. 字体大小，样式固定，交由css处理
3. 内容默认按组件传入的所有商品信息提取标题，支持强制指定

具体代码设计

额外信息区

问题分析

1. 行数不固定，每行内容不固定，如何传入?

方案一: 整个额外信息区都由插槽插入

分析: 可拓展性最高，但是使用者需要自己编写整个信息区的html和css

方案二: 额外信息区分为四个插槽，要插入哪个位置传哪个

分析: 相对来说扩展性不错，使用者至少不用布局了

具体代码设计

按钮区

按钮区完全没规律·，没有提供简便的可能性,直接插槽传入。

行为角度

行为点1: 右下角按钮区

该行为点已经完全交给插槽了。

行为点2: 点击商品区，不同的商品区域会有不同的需求,比如第一个商品点击无反应，第二个跳商家主页，最后一个跳商品详情。

行为点3:商品都有公共的异常状态点击效果，无论哪种商品，如果有异常状态都会像这样展示，点击后弹窗提示具体异常原因

总结

在封装一个业务组件的时候：

步骤-先分析ui，再分析行为

1，尽量的让使用者大多数情况下不用传太多props和插槽

2，写的时候思考一个事情．这个还能不能贴合业务做得更简便

3，一定要记得留拓展接口

4，行为记得两个事情，开关和回调