![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
组件封装
文章平均质量分 74
故梦梦
前端工程师,熟练掌握Vue、React构建了一套属于自己的ui组件库,热衷于构建现代化的Web应用。
展开
-
react,js前端轮播图 Swipper Carousel实现无缝滚动效果
在末尾我有复制了一个视图第一个元素的dom,这个就是实现无缝滚动的关键所在。当我们滑动到了最后一个视图,我们可以把整个容器的位置设置成最开始的位置,这样就可以完美实现最后一个视图和第一个视图的完美衔接了。主要就是判断临界值在每个临界值的时候处理的逻辑有一点区别,其次就是在动画的取消还有动画的效果上面,什么时候应该滑动的时候不能加动画,什么时候有需要把动画效果加上。每次移动的时候呢就是整个容器一起移动每次移动的距离每次就一个dom。这个无缝的关键就是在动画效果取消,动画效果恢复。原创 2023-08-29 16:21:21 · 3123 阅读 · 0 评论 -
封装react组件库之Notifice Message等组件
这类组件和之前的message组件都有很多相似的地方,getContainer函数获取容器,不存在容器的时候就自己创建一个dom然后挂载到body,每次创建新的Notifice组件都去检测一下这个dom是存在。页面上所有的Notifice组件都是挂载到这个getContainer函数返回的节点上面的。那我们怎么才能把一个dom挂载到指定的节点呢,我以react为例子,React.createRoot(dom)创建一个根节点,root.render(需要挂载的组件或者节点);也是弹窗类组建的代表。原创 2023-08-29 16:48:27 · 2898 阅读 · 0 评论 -
react 封装checkbox checkboxGroup 组件 HOC高阶组件封装思想
antd,和elementui组件中的checkbox是一个很常用的组件,之前自己一直有一个疑惑,为什么checkbox和checkboxGroup分开两个组件写呢,不能一个组件全部一次写完呢?后面自己封装了组件才知道,组件一定要做到颗粒化,就是封装组件一定离不开高阶组件(HOC)这个是一种思想不是泛指的一个具体组件。组件封装更多的还是考虑的所有影响组件后续的情况能否考虑得到,其次就是技术的实现问题了。重头戏checkboxGroup的封装。一个完整的checkBox完成了!封装checkBox。原创 2023-08-04 17:44:13 · 3234 阅读 · 1 评论 -
封装react组件库之Drawer组件
Drawer的三方组件库中称之为抽屉,平时开发中使用Modal组件应该比较居多,使用这个drawer组建的应用场景应该比较少,近期我也是封装自己的一套组件库,由于没有设计在风格上面就参考的ant组件库,但是功能都是自己从逻辑代码慢慢敲出来的。这次我就带来一个封装Drawer组件的全过程。封装组件第一步:封装一个组件我们不能一上来就开始写代码,我们应该先去思考这个组件需要一些什么功能。以及为使用者提供一些什么样的方法属性等等,都需要我们在封装组件的时候去考虑。只有在封装组件之前去尽可能考虑清除这些问题在原创 2023-08-13 12:17:57 · 3403 阅读 · 0 评论