前面知道了 Element Plus 关于组件设计时使用 CSS 变量来进行重构,接着这里就在正式进入业务开发之前,来学习如何在封装组件时在其可拓展性与贴合业务去寻找一个平衡点。
这是来自 B 站 up 主的分享,在上水课的时候偶然刷到的,就决定学习学习。
0
配置或极少配置就可用,特殊场景也可以拓展自定义。
如上可以看到这个商品组件在不同的地方会有不同的展示,寻找不同之处,右下角的按钮、商品内容区、商品的标题展示也有所不同、最右边的可选框也有不同。
方案一: 整个额外信息区都由插槽插入
分析: 可拓展性最高,但是使用者需要自己编写整个信息区的html和css
方案二: 额外信息区分为四个插槽,要插入哪个位置传哪个
分析: 相对来说扩展性不错,使用者至少不用布局了
按钮区完全没规律·,没有提供简便的可能性,直接插槽传入。
行为点1: 右下角按钮区
该行为点已经完全交给插槽了。
行为点2: 点击商品区,不同的商品区域会有不同的需求,比如第一个商品点击无反应,第二个跳商家主页,最后一个跳商品详情。
行为点3:商品都有公共的异常状态点击效果,无论哪种商品,如果有异常状态都会像这样展示,点击后弹窗提示具体异常原因
在封装一个业务组件的时候:
步骤-先分析ui,再分析行为
1,尽量的让使用者大多数情况下不用传太多props和插槽
2,写的时候思考一个事情.这个还能不能贴合业务做得更简便
3,一定要记得留拓展接口
4,行为记得两个事情,开关和回调