![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 76
故梦梦
前端工程师,熟练掌握Vue、React构建了一套属于自己的ui组件库,热衷于构建现代化的Web应用。
展开
-
react,js前端轮播图 Swipper Carousel实现无缝滚动效果
在末尾我有复制了一个视图第一个元素的dom,这个就是实现无缝滚动的关键所在。当我们滑动到了最后一个视图,我们可以把整个容器的位置设置成最开始的位置,这样就可以完美实现最后一个视图和第一个视图的完美衔接了。主要就是判断临界值在每个临界值的时候处理的逻辑有一点区别,其次就是在动画的取消还有动画的效果上面,什么时候应该滑动的时候不能加动画,什么时候有需要把动画效果加上。每次移动的时候呢就是整个容器一起移动每次移动的距离每次就一个dom。这个无缝的关键就是在动画效果取消,动画效果恢复。原创 2023-08-29 16:21:21 · 3196 阅读 · 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 · 2926 阅读 · 0 评论 -
react 封装checkbox checkboxGroup 组件 HOC高阶组件封装思想
antd,和elementui组件中的checkbox是一个很常用的组件,之前自己一直有一个疑惑,为什么checkbox和checkboxGroup分开两个组件写呢,不能一个组件全部一次写完呢?后面自己封装了组件才知道,组件一定要做到颗粒化,就是封装组件一定离不开高阶组件(HOC)这个是一种思想不是泛指的一个具体组件。组件封装更多的还是考虑的所有影响组件后续的情况能否考虑得到,其次就是技术的实现问题了。重头戏checkboxGroup的封装。一个完整的checkBox完成了!封装checkBox。原创 2023-08-04 17:44:13 · 3275 阅读 · 1 评论 -
封装react组件库之Drawer组件
Drawer的三方组件库中称之为抽屉,平时开发中使用Modal组件应该比较居多,使用这个drawer组建的应用场景应该比较少,近期我也是封装自己的一套组件库,由于没有设计在风格上面就参考的ant组件库,但是功能都是自己从逻辑代码慢慢敲出来的。这次我就带来一个封装Drawer组件的全过程。封装组件第一步:封装一个组件我们不能一上来就开始写代码,我们应该先去思考这个组件需要一些什么功能。以及为使用者提供一些什么样的方法属性等等,都需要我们在封装组件的时候去考虑。只有在封装组件之前去尽可能考虑清除这些问题在原创 2023-08-13 12:17:57 · 3467 阅读 · 0 评论 -
微前端qiankun vue react项目demo 以及vue项目和react项目之间的参数传递和实现微前端项目之间token免登
umi+umi内置qiankun插件,基座和子应用的路由跳转和路由配置以及动态路由配置,微前端qiankun,react作为基座,vue,react作为子项目,项目之间的参数传递和实现微前端项目之间的token免登原创 2023-06-07 11:04:25 · 4138 阅读 · 9 评论