- 博客(464)
- 收藏
- 关注
原创 copy-to-clipboard源码解读(含有toggle-selection源码以及navigator.clipboard的使用)
copy-to-clipboard源码解读、toggle-selection源码、navigator.clipboard的使用
2024-03-23 13:48:56 701
原创 resize-observer源码解读
node 18.16.0 (npm 9.5.1) 启动失败报错。node 16.16.0 (npm 8.11.0) 启动成功。是一个数组,返回所有正在活跃的目标element列表。监听 elementRef.current 的變化。里面还有一层组件SingleObserver。真正组件在ResizeObserver组件。在 SingleObserver 组件。真正实现观察的方法在这个组件。解决:更改 node 版本。
2024-03-19 19:54:51 479
原创 resize-observer-polyfill 源码解读之 ResizeObserverController
这个是个单例的控制器或者叫调度器。所有的归它管理,或者说归它管。它是调度器,它会检测 DOM 上面的变化,通过或者事件(如果前者不支持的话), 同时它还订阅了事件,它只关心这些css属性的变化。"top","right","bottom","left","width","height","size","weight",当这些事件被促发的时候,它就会迭代内部的 SPI 数组,调用它们的过滤出变化的 SPI,然后对于迭代变化的 SPI,依次调用它们的方法。/***/
2024-03-18 12:01:51 305
原创 resize-observer-polyfill 源码解读之 ResizeObserverSPI
这个是真正提供观察某个元素功能的地方,SPI应该是的简称。它是那三个接口真正提供功能的地方。它提供了如下的方法, 开始观察某个html元素,该元素以的形态保存于内部的一个Map里面。, 停止观察某个html元素停止观察所有的 html 元素。轮询内部的,调用它的isActive()方法,发现更新了元素,存放于内部的数组中轮询内部的,调用它的,更新最新值。同时调用callback通知观察者更新。返回当前是否存在更新的元素。清除更新的元素数组。。//存在更新的被观察目标元素。
2024-03-15 12:39:12 375
原创 resize-observer-polyfill源码解读之ResizeObservation
这个类是被观察的元素的封装, 它会保存元素上一次的宽高信息,提供了两个方法isActive()与元素之前的宽高进行比较,如果不同则返回 true,这样就指定这个元素更新了。这个是用当前的值更新上一次的值。target;// element的content宽度//element的content高度// element的padding-left padding-top width height/*** 创建ResizeObservation实例*//**
2024-03-14 18:13:01 1017
原创 antd5 虚拟列表原理(rc-virtual-list)
rc-virtual-list 版本 3.11.4(2024-02-01)版本:virtual-list-3.11.4。
2024-03-13 18:07:25 1156
原创 umi4 项目使用umi-plugin-keep-alive缓存页面(react-activation)
按 name 卸载缓存状态下的 节点,name 可选类型为 String 或 RegExp,注意,仅卸载命中 的第一层内容,不会卸载 中嵌套的、未命中的。按 name 刷新缓存状态下的 节点,name 可选类型为 String 或 RegExp,注意,仅刷新命中 的第一层内容,不会刷新 中嵌套的、未命中的。按 name 卸载缓存状态下的 节点,name 可选类型为 String 或 RegExp,将卸载命中 的所有内容,包括 中嵌套的所有。true: 卸载时缓存。获取所有缓存中的节点。
2024-03-06 12:54:27 701
原创 react项目中使用video标签设置自动播放并未及时播放解决
react项目中使用video标签设置autoplay,但是视频不会直接播放,会加载一段时间后才会自动播放。手动调用play方法。
2023-12-05 20:28:23 540
原创 js将图片文件转为base64格式
重要提示:FileReader 仅用于以安全的方式从用户(远程)系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。要在 JavaScript 中按路径名读取文件,应使用标准 Ajax 解决方案进行服务器端文件读取,如果读取跨域,则使用 CORS 权限。元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个。对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用。对象指定要读取的文件或数据。
2023-11-10 20:34:22 915
原创 antd5 表单form使用colorPicker组件报错Uncaught TypeError: color.toRgbString is not a function
原因可能是传form.item中传了valuePropName,把valuePropName删除就可以了。发现antd5 5.9版本传了valuePropName没有报错,5.10版本报错了。
2023-11-08 21:01:42 236
原创 antd5上传图片显示405解决
状态码 405 Method Not Allowed 表明服务器禁止了使用当前 HTTP 方法的请求。最后,上传图片时,不会再调用localhost的接口,没有任务接口变化。antd5上传图片,默认使用上传方式会调用本地的接口。另一个,可以直接使用customRequest。
2023-11-01 21:09:04 413
原创 react项目实现文件预览,比如PDF、txt、word、Excel、ppt等常见文件(腾讯云cos)
使用腾讯云文档预览,需要开通文档预览功能,该功能需要收费的。如果需要图片预览、视频或音频可以使用获取下载链接。使用cos获取预览文档链接。
2023-10-24 21:07:34 2737
原创 umi4中的配置问题,我想用umirc.ts中alias配置没起作用。是我的用法不对吗?
配置之后,在页面中引用会有ts警告,原因在于tsconfig.ts文件的配置,需要在插件中修改tsconfig的配置。在文件中直接配置是不生效的。
2023-09-29 12:55:15 499
原创 umi4项目:支持适配IE浏览器
但是antd5的弹框、通知和消息的组件弹出样式是不支持的。umi4+antd5搭建的项目默认不支持IE浏览器。简单的解决方法,便是把组件样式copy一份重写。
2023-09-29 12:46:47 405
原创 yarn start 出现以下错误 node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen);
node版本问题
2023-05-10 20:14:35 501
原创 yarn dev出现以下错误The engine “node“ is incompatible with this module. Expected version “>=18.0.0“. Got “
node版本冲突问题
2023-05-10 20:10:13 2268
原创 npm run dev 出现以下警告npm WARN config global `--global`, `--local` are deprecated. Use `--location=globa
npm出现警告
2023-05-10 20:06:23 633
resize-observer-polyfill源码分析
2024-03-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人