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

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

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

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

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

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

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

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

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

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

相关推荐
泉城老铁14 分钟前
Vue2实现语音报警
前端·vue.js·架构
临江仙45538 分钟前
前端骚操作:用户还在摸鱼,新版本已悄悄上线!一招实现无感知版本更新通知
前端·vue.js
想个什么名好呢39 分钟前
解决uniapp的H5项目uni-popup页面滚动穿透bug
前端
用户93816912553601 小时前
Vue3项目--mock数据
前端
前端加油站1 小时前
一种新HTML 页面转换成 PDF 技术方案
前端·javascript·vue.js
w***Q3501 小时前
Vue打包
前端·javascript·vue.js
有事没事实验室1 小时前
router-link的custom模式
前端·javascript·vue.js
4***V2021 小时前
Vue3响应式原理详解
开发语言·javascript·ecmascript
常乐我净6161 小时前
十、路由和导航
前端
Tonychen1 小时前
TypeScript 里 infer 常见用法
前端·typescript