Shopify / createPortal 实现操作栏组件

2021-11-22

今天的任务继续整 Shopify 模板,就整了两个新组件而已,其中第一个需要将产品关联到组件里面去提供选择和自定义选项。

Input (Product) 给 Section 下的 Block 块增加一个选择产品的设置,再根据 Product Object 去获取对象并数据就可以完成了。

拿到数据之后就是样式方面的调整了,这方面是最耗时的,想要有比较合理的最终效果,必须自己写一个 CSS Reset 规则才行。

我采用的是不动主题源文件 + 自定义新样式 + 局部 Reset 主题样式的方式给这个主题增加新的 Section 组件块。这个模板最坑的地方是栅格系统采用 Float 实现,高度调整不灵活,不能像 Flex 那样自动缩放,很傻。而如果直接修改主题内置的样式,就极易造成内置的其他组件效果异常的情况,而这正是二开项目最大的难题。

晚上给小窝增加了置底操作栏,使用 ReactDOM 的 createPortal 方法实现。这个 API 普遍用于“跨出”框架根 DOM 节点,实现通知、弹窗等类型的组件,结合原生 JS 实现一个简单的效果不算太难。

后台快捷栏
多云 一般
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君