- 博客(31)
- 收藏
- 关注
RSS订阅原创 React中的组件通讯方式
在这篇博客文章中我们探讨了React中的常见的组件通信方法，即属性传递和回调函数。这些方法可以帮助组件在React应用程序中进行数据交流和交互。通过实际编写上述例子，我们可以更好地理解这些通信方法的工作原理。希望这篇文章能够帮助你更好地理解React中的组件通信方法，并在实际应用中发挥作用。
2023-11-20 17:11:28
227
1
原创 Nginx本地最全配置和服务端部署命令
下载nginx安装包之后，解压安装包获得一个nginx的文件。其中dist是我本地项目打包之后的文件用于演示。
2023-11-20 16:27:41
551
1
原创 使用vue3从零搭建vue组件库vue3 +pnpm +workspace+ vitepress + vite自动化部署github
使用vue3从零搭建vue组件库vue3 +pnpm +workspace+ vitepress + vite自动化部署github
2023-10-20 22:13:50
689
原创 封装react组件库之Notifice Message等组件
这类组件和之前的message组件都有很多相似的地方，getContainer函数获取容器，不存在容器的时候就自己创建一个dom然后挂载到body，每次创建新的Notifice组件都去检测一下这个dom是存在。页面上所有的Notifice组件都是挂载到这个getContainer函数返回的节点上面的。那我们怎么才能把一个dom挂载到指定的节点呢，我以react为例子，React.createRoot(dom)创建一个根节点，root.render(需要挂载的组件或者节点)；也是弹窗类组建的代表。
2023-08-29 16:48:27
2991
原创 react,js前端轮播图 Swipper Carousel实现无缝滚动效果
在末尾我有复制了一个视图第一个元素的dom，这个就是实现无缝滚动的关键所在。当我们滑动到了最后一个视图，我们可以把整个容器的位置设置成最开始的位置，这样就可以完美实现最后一个视图和第一个视图的完美衔接了。主要就是判断临界值在每个临界值的时候处理的逻辑有一点区别，其次就是在动画的取消还有动画的效果上面，什么时候应该滑动的时候不能加动画，什么时候有需要把动画效果加上。每次移动的时候呢就是整个容器一起移动每次移动的距离每次就一个dom。这个无缝的关键就是在动画效果取消，动画效果恢复。
2023-08-29 16:21:21
3346
原创 封装react组件库之Collapse
然后就是Panel组建的封装了，这个子组件也没有太大的难度，前面我们的方案已经很清楚了所以写起来也没有太大的难度，唯一一个问题很有难度我觉得有必要拿出来单独讲一下。这个就是Collapse的组件代码，很简单没有特别的复杂代码，props.children传递参数在我之前的博客我也有一篇拿来专门讲过，有兴趣的可以去看看。在后台系统中这个应该还是很常见用的可能不是很频繁，但是有时候还是很有适用的场景的，现在我们就来从零封装一个完整的Collapse组件。这都是实现的一个方向，这个组件我也是用了Flip动画。
2023-08-23 11:04:59
3455
原创 focus-within封装组件必不可少的css伪类
比如我封装一个按钮或者checkbox这种组件，在点击的时候给上一个状态，再点击其余地方的时候这个状态取消，第一想法我就是用input这个标签有方法，获取焦点focus,blur用这个不就可以完美的通过控制class然后来实现效果了吗，这个方法确实可以一开始我也是这么做的，但是组件库越来越多的时候我就觉得很麻烦了，每个组件我都需要去添加很多state显示classname,工作量就越来越大，代码也不简洁看起来很重。不需要再去维护其余的变量和多余的classname。当焦点失去时，移除该类，恢复默认样式。
2023-08-16 16:12:42
2903
原创 requestAnimationFrame
requestAnimationFrame是浏览器提供的一个用于优化动画的API。与setTimeout和不同，它在浏览器的下一次重绘之前执行指定的函数，以实现更加平滑和高性能的动画效果。会根据浏览器的刷新频率进行调整，确保动画在每一帧的重绘时执行，通常是60帧每秒。
2023-08-15 22:22:49
3197
原创 封装react组件库之Drawer组件
Drawer的三方组件库中称之为抽屉，平时开发中使用Modal组件应该比较居多，使用这个drawer组建的应用场景应该比较少，近期我也是封装自己的一套组件库，由于没有设计在风格上面就参考的ant组件库，但是功能都是自己从逻辑代码慢慢敲出来的。这次我就带来一个封装Drawer组件的全过程。封装组件第一步:封装一个组件我们不能一上来就开始写代码，我们应该先去思考这个组件需要一些什么功能。以及为使用者提供一些什么样的方法属性等等，都需要我们在封装组件的时候去考虑。只有在封装组件之前去尽可能考虑清除这些问题在
2023-08-13 12:17:57
3671
2
原创 Vue中使用 WangEditor 编辑器的详细教程
在富文本编辑器中，你可以通过自定义样式和配置来定制编辑器的外观和行为。以下是一个示例，展示了如何自定义编辑器的样式和配置：// 自定义编辑器的样式 editor . config . height = 400;// 配置编辑器的相关选项 editor . config . uploadImgServer = '/api/upload';// 初始化编辑器 editor . create();} , };
2023-08-08 15:35:44
7945
原创 Umi框架使用详细教程demo,从快速入门到进阶
Umi 使用了 webpack 作为底层构建工具。通过中的配置，可以自定义 webpack 配置。config},Umi 框架提供了丰富的功能和灵活的配置选项，使得前端开发变得更加简单、高效和具有扩展性。通过本教程，我们详细介绍了 Umi 的使用和配置以及一些进阶功能和扩展的知识点。希望这个 Umi 框架详细教程对你有所帮助！
2023-08-08 15:17:02
13617
2
原创 前端性能优化终极解决方案。
在当今Web应用中，用户对网页的加载速度和响应性提出了更高的期望。本文将探讨一些关键的前端性能优化技巧，帮助你提高网页的加载速度、减少资源消耗和提升用户体验。通过应用上述的前端性能优化策略，你可以提高网页的加载速度、响应性和用户体验。使用性能测试工具，如Lighthouse和Chrome DevTools进行分析和优化。使用第三方库和框架的轻量版本，减少不必要的代码体积。使用媒体查询和断点，为不同屏幕尺寸提供适当的样式。优化移动设备上的布局和元素交互，改善用户体验。使用异步脚本和延迟脚本，提高初始化速度。
2023-08-08 10:15:18
3296
1
原创 如何用最简单的方法快速上手Vue.js
Vue.js是一款广受欢迎的JavaScript框架，用于构建交互式的前端应用程序。它的易学性、高效性和灵活性使其成为开发者的首选。本篇博客将详细介绍如何快速上手Vue.js，从搭建开发环境到构建一个简单但功能丰富的Vue应用。
2023-08-06 15:34:14
3057
原创 JavaScript 数组的所有方法以及数组去重使用示例
使用Set对象：Set是ES6中引入的新的数据结构，它只存储唯一的值。：返回指定元素在数组中最后一次出现的索引，如果不存在返回 -1。：返回指定元素在数组中第一次出现的索引，如果不存在返回 -1。：将数组中的所有元素连接成一个字符串，并返回该字符串。：对数组中的每个元素执行指定的函数，并返回一个新数组。：向数组末尾添加一个或多个元素，并返回新数组的长度。：向数组开头添加一个或多个元素，并返回新数组的长度。：删除数组的最后一个元素，并返回被删除的元素。：删除数组的第一个元素，并返回被删除的元素。
2023-08-04 21:24:52
2962
2
原创 getBoundingClientRect 获取的数据不正确
然后组件就定位到了和容器组件一样的位置。需要帮这个容器组件定位到我图上的位置我还需要获取tooltip组件的大小还做运算。我在实现一个tooltip组件的时候需要在鼠标移入的时候获取当前trigger容器的位置以及tooltip组件的位置。像这样我获取这个容器的位置大小使用getBoundingClientRect这个函数是没有任何问题的数值都是准确的。问题就出现了我获取的tooltip的大小比实际的大小要小一些。解决问题我们把获取的数值除以这个scale()数值=》tooltip真实的大小了。
2023-08-04 18:06:42
6475
1
原创 react 封装checkbox checkboxGroup 组件 HOC高阶组件封装思想
antd,和elementui组件中的checkbox是一个很常用的组件，之前自己一直有一个疑惑，为什么checkbox和checkboxGroup分开两个组件写呢，不能一个组件全部一次写完呢？后面自己封装了组件才知道，组件一定要做到颗粒化，就是封装组件一定离不开高阶组件（HOC）这个是一种思想不是泛指的一个具体组件。组件封装更多的还是考虑的所有影响组件后续的情况能否考虑得到，其次就是技术的实现问题了。重头戏checkboxGroup的封装。一个完整的checkBox完成了！封装checkBox。
2023-08-04 17:44:13
3363
1
原创 react createRoot和createPortal的用法和区别
那么我们有了这个根节点是不是就可以把我们的弹窗组件放到这个根节点里面呢？其实我们可以用这个来做很多的事情。这就是传统的创建react项目然后挂载到根节点的方式，和vue中的类似原理都是一样的，创建一个节点然后把这个节点渲染到根节点中。这样做你会发现你这个组件不灵活会被很多东西影响，比如你的父级元素有相对定位等等都会影响到你这个弹窗组件。这样生成的dom加载在body下，实现很多弹窗消息提示还有draw这样的组件都可以采用这样的方式。这样创建的元素就会挂载到根节点container-model这个节点下面。
2023-07-29 21:20:42
4322
原创 vue3 form表单新增，表单修改，删除，表单数据回显
vue3封装弹窗组件，数据回显，封装组件的流程，第一理解具体的业务需求。想好数据的交互层级，数据进数据出的具体逻辑。vue的组件封装记住一点不要在子组件修改父组件的数据，需要修改数据emit方法抛出数据父组件修改。。
2023-07-27 10:34:26
8042
1
原创 vue3双向绑定v-model封装图片文件上传组件。
使用Vue3框架封装一个简单并且功能强大的文件上传组件。这个组件将为你提供一种方便的方式来上传文件，并且能够与其他组件实现数据的双向绑定。封装组件一个是方便一个是数据的双向绑定，这一点也是vue的核心，之前vue2使用value然后子组件使用emit(‘input’)方式，或者使用async的方法子组件用emit(‘update:prop’)方法。这个组件将帮助你实现文件的上传功能，并且能够与其他组件进行数据的双向绑定，使你能够轻松地处理上传的文件信息。
2023-07-26 17:30:18
3912
4
原创 react 组件传参 props.children如何与组件之间进行数据通信
父组件通过遍历 children，使用 React.cloneElement 将 sendDataToParent 回调函数作为新的 prop 传递给每个子组件。方法二：使用渲染函数作为 props.children 你可以使用一个接受参数并渲染其子元素的函数作为 props.children。这样，你可以直接传递参数给子组件作为函数的参数。使用 props.children 并通过回调函数传递数据是一种常见的模式，它提供了一种在组件之间进行通信的方法，让子组件能够向父组件传递参数。
2023-07-17 14:25:53
6198
1
原创 javascript react 手写前端浏览器滚动条,完美实现原生滚动条效果。
其次是滑块滑动的距离也是一个比值，计算的是滑块在可滑动轨道的一个滑动比值，滑动滑块的时候同时也需要滑动内容区，内容区的滑动距离也是一个比值。这就是一个最终的实现效果，滚动条支持点击滑动，左边内容区也能同步滑动，鼠标滚动同时也支持，手写的滚动条同步滚动。主要的难点就是计算滑块的一个高度，根据不同的内容大小同比例算出滑块在容器中的一个比例。类比就是 滑块的一个大小/滑块可以滑动的一个大小=容器的一个大小/容器可滑动的一个大小。
2023-07-10 15:03:38
3439
1
原创 react 关于为什么useRef()，ref.current获取元素的高度为0，宽度也为0
如果 contentRef?.current?.clientHeight 返回 0，那很可能是因为你在检查高度之前的元素仍然处于隐藏状态。在元素处于隐藏状态时，通常会无法获取其可见高度。一种常见的解决方案是等到元素显示后再获取其高度。你可以通过使用 useEffect 监听元素的显示/隐藏状态，并在元素显示时获取其高度。
2023-07-05 17:53:08
4440
1
原创 React antd 表格新增 表格修改 删除 表格数据回显
弹窗中就设置form的initValues就是穿过来的formValue的值，如果是新增的时候就是一个空对象，然后新增的每一项的值填写一个才有一个，如果需要默认值的话就需要设置对象合并{默认值,…这种方式就是通过判断在点击修改的数据对formValue的值判断只有这个值的key长度不为零才渲染修改的组件，这里采用了两个同一个组件的方式，通过不同的弹窗状态去判断显示是新增还是修。这种方式通过form.resetFields();form.setFieldsValue方式设置form的值。
2023-06-08 16:09:05
5975
原创 微前端qiankun vue react项目demo 以及vue项目和react项目之间的参数传递和实现微前端项目之间token免登
umi+umi内置qiankun插件，基座和子应用的路由跳转和路由配置以及动态路由配置，微前端qiankun,react作为基座,vue,react作为子项目，项目之间的参数传递和实现微前端项目之间的token免登
2023-06-07 11:04:25
4286
11
原创 monaco-editor 编辑器格式化json,sql
monaco-editor微软的开源项目有点坑，纯英文的文档对很多刚开始前端的小朋友很不友好，刚好这段时间公司的项目遇到了文本编辑，发现这个居然是微软的vscode网页版，巧了，刚好开发工具正是vscode，秉着用了这么久我还不熟悉你这玩意的心态，就开始看着官方文档琢磨了，没想到这玩意是真的坑，文档不全的厉害，很多修改难弄的很。一路写下来真的是头疼的厉害第一步：肯定是初始化这个插件npm install monaco-editor -simport * as monaco from 'mona
2022-01-17 11:25:30
14084
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人