shop-cart-list组件优化

Question

黄老师， 重构版的shop-cart-list组件为了实现层级是否有点hack的做法， clone了一个组件盖在原有组件上面…
是否可以考虑给createApi增加一个可选挂载el的选项， 就像react 16的protal一样呢？ 目前的实现方法感觉过于复杂了，难以理解和维护。

Answer 1

weixin_慕斯卡1272871 2019-04-24 09:42:49

参见上面我回复老师的回复

截图如下

Answer 2

ustbhuangyi 2018-11-18 11:06:21

你这个确实是个好问题，现在的实现也确实复杂了一些，但是设置挂载节点可能仍然不能解决我们课程遇到的问题，本质上 fixed 会受外层的 transform 影响。
我想到一个方案是把这个底部的 shop-cart 组件在 shop-cart-list 底部再引用一份，共享数据的方式，而不用动态去创建 shop-cart-sticky 组件，可能从理解上更容易一些。你可以尝试一下，或者有更好的方案，也欢迎交流。

• weixin_慕斯卡1272871 #1

  老师，我实现了另外一种思路，比较简单， 见下面的截图。
  即：在shop-cart-list内部html最末尾增加一组div，里面为复刻的logo-wrapper（即来自shop-cart组件内部<logo-wrapper>的相应html和css）。
  同时，shop-cart增加传递totalcount给shop-cart-list。
  当然，shop-cart-list也需要引入bubble组件。
  剩下的逻辑很简单，每次shop-cart-list显影，都会接收到totalCount给自己的bubble组件显示。
  剩下的就是在shop-cart-list内部调整logo-wrapper的样式即可，我采用的是fixed布局，bottom=-46px。这样位置就完美对上了。
  经过测试，没有任何问题

• weixin_慕斯卡1272871 #2

  当然，我是为了测试这个思路的简便性，所以拿掉了transition动画的。
  如果加上了动画，如果能分开控制三部分的动画（maks、content、logowrapper），我想也是没问题的。

• 慕标赏嗨 #3

  我在笔记中，看到另外一个同学的思路，把购物车直接用createAPI实现。
  另外，课程中的实现真是太复杂了，我都有点困惑，为什么展开缩回列表要用createAPI了，这个优势到底是什么呢。

点开查看后面3条评论