- 博客(34)
- 收藏
- 关注
RSS订阅
原创 react固定容器标签超出n+展示
该代码实现了一个自适应显示的标签列表组件TagList，主要功能是根据容器宽度动态计算并显示可见标签数量，超出部分折叠在"+N"标签中。技术要点包括： 使用ResizeObserver监听容器尺寸变化 动态计算可见标签数量（通过临时元素测量标签宽度） 隐藏部分标签以Tooltip形式展示 支持自定义数据源和容器宽度 组件会在父容器宽度不足时自动将超出部分折叠，鼠标悬停"+N"标签可查看全部隐藏标签。
2025-09-19 18:28:08
435
原创 git cherry-pick从另个分支复制到现在分支上
本文介绍了在开发分支需要从develop2合并代码时，使用git cherry-pick来替代会产生冲突的rebase操作。具体操作步骤包括：1）通过git reflog show --date=iso分支名查看目标分支的commit记录；2）忽略rebase相关的记录，只复制所需的commit哈希值；3）执行git cherry-pick hash命令来选择性合并特定提交。这种方法可以有效避免大规模rebase带来的冲突问题，实现精准的代码合并。
2025-08-14 15:13:56
179
原创 select数据触底加载更多
这是一个基于React和Ant Design的SelectLoadMore组件，实现了一个支持分页加载和搜索功能的增强型下拉选择器。组件特点包括：1) 支持防抖搜索，避免频繁请求；2) 滚动到底部自动加载更多数据；3) 提供默认的mock数据功能；4) 可配置页面大小、键值映射等参数。使用方式简单，只需传入自定义的fetchFn获取数据接口，并支持多选模式。组件内部处理了分页逻辑，通过hasMore状态控制是否继续加载，并显示加载中的Spin状态。该组件适用于需要处理大量数据的选择场景，提升了用户体验。
2025-08-07 17:10:05
257
原创 antd组件select下拉数据分页加载
该代码实现了一个基于React和Ant Design的可搜索分页远程选择组件。主要功能包括： 使用防抖函数优化搜索请求 支持分页加载（每次加载20条数据） 滚动到底部自动加载更多 多选模式 显示加载状态提示 组件通过fetchUsers模拟异步请求，使用useState管理数据和状态，useRef维护分页和请求状态。包含搜索处理、滚动加载和防抖等优化措施，适合大数据量场景下的远程搜索选择需求。
2025-08-06 16:43:52
411
原创 antd中table文本超出使用Tooltip展示否默认展示
这是一个React组件OverflowText，用于处理文本溢出显示省略号并添加Tooltip提示。组件通过ResizeObserver检测文本是否超出指定宽度(maxWidth默认270px)，当溢出时显示Ant Design的Tooltip提示完整内容。实现原理是通过ref获取DOM元素，比较scrollWidth和clientWidth判断溢出状态，并利用CSS的text-overflow:ellipsis实现省略号效果。使用方法简单，只需传入text和可选的maxWidth参数即可。该组件解决了长文
2025-07-30 17:06:09
191
原创 文件流导出文件
res是后端返回文件流，默认文件.xlsx是文件名 .xlsx是后缀名。使用downloadFile(res, `默认文件.xlsx`);
2025-07-18 10:51:12
245
原创 版本5 的ant-design的modal如何修改圆角
摘要：该代码片段展示了一个React模态框(Modal)组件的自定义实现。通过modalRender属性对模态框样式进行修改，具体为添加12像素的圆角边框(borderRadius:12)。模态框宽度固定为488像素，不可通过点击遮罩层关闭(maskClosable=false)，且不显示默认底部按钮(footer=null)。onCancel回调函数用于处理取消操作时的逻辑。代码采用React.cloneElement方法克隆并扩展原有模态框的样式属性。
2025-07-09 16:04:56
328
原创 uniapp项目使用ucharts的tooltip（提示框）自定义的方法
使用的话基础用法：<qiun-data-charts type="line" :opts="opts" :chartData="chartData">type：就是类型opts：配置chartData：就是数据<qiun-data-charts type="line" :opts="opts" :chartData="chartData" tooltipFormat="tooltipDemo1">找到下面的文件 config-ucharts.js这个就在config-ucharts.js文件里 搜form
2025-01-22 14:07:46
1039
原创 uni事件监听（似发布订阅）
其中的dispatchLogin相当于桥梁使得 $emit和$on 有关联。uni.$on 一般写在$emit触发后需要进行回调的地方。比如：一个地方修改数据另一个地方需要重新请求数据。uni.$emit 一般写在触发事件哪里。
2024-04-30 15:34:20
373
原创 luch-request请求封装
Luch-Request 提供了简洁的 API 接口，使发送请求变得非常容易，开发者只需要关注业务逻辑，而不需要过多关心底层网络请求的细节。：Luch-Request 支持拦截器机制，可以在请求发送之前或响应返回之后对请求进行拦截处理，例如添加请求头、修改请求参数、处理错误等操作。：Luch-Request 支持取消请求的功能，可以在请求发送过程中随时取消未完成的请求，避免不必要的网络请求和资源浪费。：Luch-Request 可以配置请求缓存，提高重复请求的效率，减少服务器压力。
2023-12-14 15:05:50
2486
1
原创 数据无限滚动使用intersection observer实现
Intersection Observer 是一个浏览器 API，用于监测元素与其祖先或视口之间的交叉状态。它提供了一种异步的方法，以便在元素进入或离开视口时执行相应的操作。这对于实现懒加载、无限滚动、可见性追踪等交互效果非常有用。可以做图片懒加载，相比传统的window.window.addEventListener性能更好。传统的加上防抖节流可能都没有intersection Observer用户体验好。
2023-12-11 11:51:51
707
1
原创 防抖和节流
就是在一定时间内触发事件，每次触发都会重新计时，在计时结束前没有再次触发事件，就会执行结果就是在一定时间内多次触发相同的事件，他只会执行第一次触发的事件，如果计时结束后再次触发事件，他会再次执行事件。
2023-08-21 21:38:20
184
1
原创 实现一个 myMap,方法，可以跟数组 map 方法一样，可以进行数组循环
【代码】实现一个 myMap,方法，可以跟数组 map 方法一样，可以进行数组循环。
2023-08-16 22:10:46
191
1
原创 使用函数封装找出数组[1,2,3,4,5,3,2,2,4,2,2,3,1,3,5] 中出现次数最多的数，并统计出现多少次
【代码】使用函数封装找出数组[1,2,3,4,5,3,2,2,4,2,2,3,1,3,5] 中出现次数最多的数，并统计出现多少次。
2023-08-10 20:19:10
171
1
原创 js的数据类型和类型校验方法
引用型数据类型（也叫复杂数据类型）一般用Object代表：普通对象，数组，正则，日期，Math数学函数都属于Object。基本数据类型（也叫简单数据类型）分别是。
2023-08-07 20:47:49
406
原创 闭包的理解
通俗的说闭包就是一个函数里嵌套一个函数，并且里面的函数可以访问到外函数定义的变量和属性。全局作用域是访问不到局部作用域的变量，所以js提供一个解决方法，就是一个函数嵌套函数，也就是闭包。
2023-08-06 20:01:22
114
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人