SEMI DESIGN 源码学习(六)轮播图

轮播图代码位于 packages/semi-ui/carousel/index.tsx,代码量不多。

核心同样是这个 foundation 属性,类型为 CarouselFoundation

CarouselFoundation 封装了轮播图的操作方法,通过传入的 adapter,管理轮播图组件的 state

adapter 目的是操作组件的 state 属性。

组件暴露的方法实际上调用的是 foundation 的方法。

renderChildren 方法渲染传给轮播图组件的子元素。

renderIndicator, renderArrow 分别渲染指示器和切换箭头。

最后 render 方法返回一个 div 容器,包裹整个组件。

本文完,下期详细解释这个 foundation 模式。

相关推荐
雨雨雨雨雨别下啦9 分钟前
Vue3——RabbitShopping
前端·javascript·vue.js
BumBle14 分钟前
从声明式到命令式:Vue3 弹窗组件的工厂模式重构
前端
恋猫de小郭20 分钟前
你的蓝牙设备可能正在泄漏你的隐私? Bluehood 如何追踪附近设备并做隐私分析
android·前端·ios
取名不易1 小时前
vue-drawer-board 简单的画图功能
前端
学习指针路上的小学渣1 小时前
JavaScript笔记
前端·javascript
取名不易1 小时前
在 nuxtjs中通过fabric.js实现画图功能
前端
冰珊孤雪1 小时前
Android Studio Panda革命性升级:内存诊断、构建标准化与AI调试全解析
android·前端
coder_Eight1 小时前
彻底吃透 Promise:从状态、链式到手写实现,再到 async/await 底层原理
javascript·面试
用户806138166591 小时前
避免滥用“事件总线”
前端
Xiaoke1 小时前
我终于搞懂了 Event Loop(宏任务 / 微任务)
前端