搜索到
2
篇与
的结果
-
前端常用框架或库收集整理 前端常用框架或库收集整理React 常用组件react-use 常用的自定义 hooks 合集react-hook-form 最常用 react 表单处理hooks，用来做表单验证处理，提交等react-cool-img react图片懒加载react-cool-inview react元素块内容进入页面可视区域监听组件，类似于react-dnd 拖放效果组件react-sortable-tree 可以排序的树形组件@uiw/react-md-editor md 编辑器，可以自定义控件，如上传等shepherdjs 网站新手引导框架 也有react 组件 https://shepherdjs.dev/docs/react-files-uploading react 文件上传组件 https://www.npmjs.com/package/react-files-uploadingreact-images-uploading react 图片上传组件 https://www.npmjs.com/package/react-images-uploadingreact-intersection-observer react 图片和dom懒加载 https://github.com/thebuilder/react-intersection-observerreact-share 网站分享快速生成按钮和图表的组件NodeJscheerio 用jquery语法来解读提取html文本内容的爬虫内容分析库ora 命令行loading工具consola 命令行人机交互输入工具，可以异步执行多个输入，单选，多选，确认 操作commander 命令行工具，注册命令，指定命令的说明，可选参数，以及要执行的代码，一般配合上面的 consola 来实现命令行工具sharp 图片合成和处理工具，可以修改图片大小，滤镜，网图片上加文字，图片等UI 组件库ElementUI vue 框架使用最多的组件库Framework7 支持所有主流前端框架，三端都有组件库JS 绘图jsplumb 拓扑图绘制框架fabricjs canvas库，支持画图，绑定操作，事件等，让canvas变简单ECharts 不用多说，无人不知，无人不晓Cytoscape.js 主要用来画连线图，如关系图谱JS 动画Tween.js 一个简单的 JavaScript 补间（比如css3的ease-in）动画库Snap.svg 绘制svg的类库，超级简单方便的apiAnime.js 类似jquery和jquery-ui的动画库，直接操作domwaypoint.js jquery监听dom进入浏览器可是窗口区域插件parallax.js 视距差效果JS工具函数html-to-text 将html内容转换成纯文本去除富文本内容字符串格式处理工具，支持多层级处理驼峰，下划线，大驼峰等的转换 https://www.npmjs.com/package/humps音视频相关webm-muxer/mp4-muxer 音视频录制并生成视频工具库 https://www.npmjs.com/package/webm-muxerjs-audio-recorder https://www.npmjs.com/package/js-audio-recorder 音频录制，支持录制时的声波显示等，非常强大代码编辑器Ace editor Ace是一个用JavaScript编写的嵌入式代码编辑器。它与Sublime，Vim和TextMate等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和JavaScript应用程序中。作为与codemirror同类的现代编辑器，ACE同样拥有mode进行语法解析，实现编辑器的智能感知型功能。CodeMirror 是一个用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并附带一些实现更高级编辑功能的语言模式和插件。其核心仅提供编辑器功能，其他功能通过丰富的API和插件实现。CodeMirror的使用基于特定的程序语言模式(mode)，它对特定的语言进行语法解析(parse)，使编辑器能够在解析结果基础上进行语法高亮，实现具有上下文感知(context-aware)的代码补全、缩进等功能。monaco editor monaco是VS Code的代码编辑器，同时也是一个开源代码编辑器，可以嵌入到Web应用程序中社区整理常用库10个按钮特效 http://www.adobeedu.com/%E8%BF%9910%E4%B8%AA%E6%8C%89%E9%92%AE%EF%BC%8C%E6%8A%8A-css-hover-%E7%9A%84%E5%88%9B%E6%84%8F%E5%8F%91%E6%8C%A5%E5%88%B0%E6%9E%81%E8%87%B4%E4%BA%86/HTML5+CSS3 最酷的 loading 效果收集 https://www.runoob.com/w3cnote/free-html5-css3-loaders-preloaders.html -
【react-dnd使用总结一】拖放完成后获取放置元素在drop容器中的相对位置 工具函数-根据元素的起始位置和最终位置，计算相对于某元素的位置export interface IPosition { left: number; top: number; } /** * 根据元素的其实位置和最终位置，计算相对于某元素的位置 * @param initialPosition 拖动元素相对于屏幕左上角的起始位置（偏移量） * @param finalPosition 拖放完成后当前节点相对于屏幕左上角的位置 * @param containerEle 目标容器元素 * @returns */ export const getCorrectDroppedOffsetValue = ( initialPosition: any, finalPosition: any, containerEle: HTMLDivElement, ): IPosition => { // 获取容器的位置信息 rect 信息包含left top width height const dropTargetPosition = containerEle.getBoundingClientRect(); const { y: finalY, x: finalX } = finalPosition; const { y: initialY, x: initialX } = initialPosition; // 计算当前位置相对于drop容器的位置. // finalY > initialY, 则视为向下拖拽, 否则是向上拖拽 const newYposition = finalY > initialY ? initialY + (finalY - initialY) - dropTargetPosition.top : initialY - (initialY - finalY) - dropTargetPosition.top; const newXposition = finalX > initialX ? initialX + (finalX - initialX) - dropTargetPosition.left : initialX - (initialX - finalX) - dropTargetPosition.left; return { left: newXposition, top: newYposition, }; }; 在drop回调函数中drop(target: any, monitor: DropTargetMonitor) { console.log(target, monitor); const position = getCorrectDroppedOffsetValue( monitor.getInitialSourceClientOffset(), // 拖动元素相对于屏幕左上角的起始位置（偏移量） monitor.getSourceClientOffset(), // 拖放完成后当前节点相对于屏幕左上角的位置 document.querySelector('#container') as HTMLDivElement, ); console.log(position); },
