- 博客(13)
- 收藏
- 关注
RSS订阅原创 react 鼠标上下滚动/鼠标按下拖拽，实现左右滑动滚动条效果
在移动事件中处理左右滑动box元素的横向滚动条逻辑，监听鼠标松开事件则是为了移除监听的 mousemove 和 mouseup 事件。实现效果如标题所述，用react实现一个鼠标上下滚动能够实现左右滑动滚动条的效果，同时支持鼠标按下拖拽能够达到同样效果，如图（功能效果局部截图）一.实现鼠标悬停在box 元素上时，阻止对整个页面的上下滚动影响，实现左右滑动box元素的横向滚动条，思路如下。二.鼠标左键按下同时左右拖拽实现左右滑动box元素的横向滚动条，思路如下。2.对box进行鼠标滚轮监听。
2025-02-25 16:20:02
372
原创 删除github仓库
4.在设置页面往下翻，翻到底部找到Danger Zone 下的 Delete this repository。3.在仓库详情页点击右上角"settings",进入该仓库的设置页。2.找到仓库入口，选择要删除的仓库，进入该仓库详情页。5.根据提示输入仓库名及密码后即可删除。1.登录gitHub账号。
2024-05-30 11:28:38
723
原创 前端react 事件总线
介绍事件总线（EventBus）是一种广泛用于软件架构中的设计模式，通常作为多个模块间的通信机制，它可以帮助组织和管理应用程序中不同组件之间的通信，以提高应用程序的可维护性、可扩展性和灵活性。事件总线模式应用了发布者/订阅者模式，不同的组件通过订阅和发布事件来进行通信。发布者发布一个事件，订阅者可以订阅该事件并在事件发生时执行相关的操作。事件总线充当了中介者的角色，它负责管理所有的事件和订阅者，并确保事件正确地传递到所有订阅者。
2024-05-28 18:20:26
1560
1
原创 git密钥过期更新Your SSH key has expired
提交代码时出现以上报错提醒，说明你的Git 的 SSH Key秘钥过期,需要重新生成 SSH Key秘钥。
2024-05-27 15:58:01
6558
原创 【疑难杂症】next.js：sessionStorage、document、window等 undefind
sessionStorage、document、window 是我们常用到的对象，怎么在next.js中就找不到了呢？上的，并不是浏览器上的，所以next.js中所有服务器端渲染的页面都找不到浏览器相关对象以及方法。1.将服务器端渲染页面定义称客户端渲染页面。next.js是服务器渲染，运行在。
2024-05-24 14:00:17
626
1
原创 前端fetch 实现流式接口
先说说传统传输吧，我们日常接触的大多数是传统传输方式，就也是整段传输，前后端将数据一次性传送给对方；相比于传统传输方式，流式传输则采用分段的方式将要传输的数据分层n段，后端一次性传一段给前端，直到传输完成为止，当然在传输的过程中，前端也可以提前中断传输，后端收到中断传输的消息后，也不再继续往前端传输剩下没传完的数据段。当然，前端流式传输需要在后端支持分块传输的情况下才能实现。简单来说fetch 是一种 HTTP 数据请求的方式， XMLHttpRequest（以下简称 XHR）的一种替代方案。
2024-05-23 20:17:28
6173
2
原创 浅识TextDecoder
TextDecoder（文本解码器）是 JavaScript 中的一个 API，用于将二进制数据解码为字符串。它支持多种字符编码，例如 例如UTF-8ISO-8859-2KOI8-RGBK。
2024-05-22 18:37:08
1022
1
原创 [react性能优化] memo,useCallback减少子组件不必要的重复渲染
React.memo 是 React 16.6 新的一个 API，用来缓存组件的渲染，避免不必要的更新，其实也是一个高阶组件, React.memo只能用于函数组件官方文档看这里：memo – React 中文文档使用 将组件（someComponent）包装起来，以获得该组件的一个 记忆化 版本。通常情况下，只要该组件的 props 没有改变，这个记忆化版本就不会在其父组件重新渲染时重新渲染。举个栗子🌰：我们可以看到 button 被点击了16次， MemoChildrenA 和Child
2024-05-21 17:50:29
841
原创 基于react的三款稳定好用Markdown格式渲染成HTML插件
最近项目上遇到了展示"大纲文本"内容的需求，前端从后端接收的文本内容为markdown格式，需要转换成HTML格式在页面渲染，具体效果如下：考虑到项目只需要渲染简单的纯色文本格式，并且只渲染展示，不可编辑，所以选择插件的时候，我尽量从稳定、轻量化方向考虑最终选择了三款【react-remarkable】、【marked】、 【react-markdown】，并且对这三款插件作了一个详细的比较，用到这个功能的小伙伴可以自行选择。
2024-05-16 18:30:41
5426
原创 react 复制内容到剪切板[超详细]
c.由于clientX,clientY获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变，因此还需要获取滚动页面的滚动距离 scrollHeight。a.选中文本时，首先得鼠标双击屏幕选中，或者是shift+单击，然后释放鼠标，文本被选中，所以在这里我们使用onmouseup 事件。b.通过事件监听，在handleMouseup=(e)=>{}中拿到当前鼠标相对于屏幕的位置 e.clientX,e.clientY。三.点击copy图标，将拿到的文本内容传递给剪贴板。
2023-06-14 20:08:40
11699
原创 在react稳定版本中使用useEffectEvent
我新建了一个项目将react包升级成实验版本后，发现在项目中仍然没法使用，而且还新出来更多的问题，so,项目中别轻易尝试。但目前experimental_useEffectEvent 还在 建设中，在react的稳定版本中还没办法使用，官网给的解决方案是，将稳定react 稳定版本升级成实验版本。react 新发布的版本18.2.0 中新增了。用于构建 Web 和原生交互界面的库。Timer.tsx 运行截图。
2023-06-08 17:41:18
6309
原创 解决前端项目初始化报错 npm ERR command git --no-replace-objects ls-remote ssh://git@github-com/nhn/raphael-git
解决前端项目初始化报错: code 128npm ERR! An unknown git error occurrednpm ERR! command git --no-replace-objects ls-remote ssh://git@github.com/nhn/raphael.git /github 上添加 SSH key
2021-12-27 16:49:32
56973
9
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人