业务
前端Jason
做一个能独立思考的人,有话可说,有事可干,歌以咏志。
展开
-
找出数组中重复的项
【代码】找出数组中重复的项。原创 2023-08-20 22:06:06 · 202 阅读 · 0 评论 -
IntersectionObserver API实现虚拟列表滚动
的用法,以及如何兼容。如何在React Hook中实现无限滚动。如何正确渲染多达10000个元素的列表。无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。当你使用滚动作为发现数据的主要方法时,它可能使你的用户在网页上停留更长时间并提升用户参与度。随着社交媒体的流行,大量的数据被用户消费。无线滚动提供了一个高效的方法让用户浏览海量信息,而不必等待页面的预加载。如何构建一个体验良好的无限滚动,是每个前端无论是项目或面试都会碰到的一个课题。原创 2023-05-07 18:56:45 · 1867 阅读 · 8 评论 -
过滤树数据
给你一个树数据,如何删除(过滤)一个或多个指定的节点?原创 2023-04-04 23:12:55 · 161 阅读 · 0 评论 -
React无缝滚动组件
无缝滚动原创 2023-03-25 22:49:22 · 1379 阅读 · 0 评论 -
使用react-bmapgl绘制区域并判断是否重叠
react hook项目使用百度地图如何绘制区域(电子围栏)???如何判断多边形与多边形、多边形与圆形、圆形与圆形是否重叠???原创 2023-01-16 15:31:08 · 618 阅读 · 0 评论 -
react项目中如何将多个文件压缩成zip下载
假设后端给了你20个文件url,前端如果一次下载一个,下载20次,浏览器底部将非常壮观,这不是一个优秀的前端。优秀的前端很容易想到将这些文件压缩成一个zip,这样就只需要下载一次就够了,设计非常的人性。原创 2022-10-08 22:31:25 · 1302 阅读 · 0 评论 -
树数据中根据子节点id查找父节点的id
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<原创 2021-11-29 17:07:44 · 1009 阅读 · 2 评论 -
ant-design Upload组件自定义上传
在使用ant-design进行表单开发(注册)的时候遇到需要包含图片数据的提交但是由于是注册,java那边是先有提交的数据后生成新用户,注册时提交的数据没法找到对应的用户因此没有开发图片的上传接口,前端的做法是保存用户注册的数据一次性提交给后端由于没有上传接口也就没有action,改为是有用customRequest自定义上传<Form.Item> <Form.Item name="certificationFiles" valuePropName="fil.原创 2021-11-22 10:15:10 · 1891 阅读 · 0 评论 -
JS根据二进制数据下载文件
逻辑简单,直接上代码var xhr = new XMLHttpRequest()xhr.open('get', '${ctx!}/admin/v1/licence/' + id)xhr.responseType = "blob" // 设置响应数据类型为blob, 不设置会出现下载的文件比源文件更大xhr.send()xhr.onload = function() { var blob = new Blob([this.response], { type: this.responseType.原创 2021-08-24 14:32:32 · 601 阅读 · 0 评论 -
JS实现复制文本功能
核心api:textArea.select(); 代替手动实现自动选中文本document.execCommand("Copy") 复制选中内容到剪贴板,返回值是一个boolean值,如果是 false 则表示操作不被支持或未被启用。了解更多废话少说直接上代码// 1. 创建// 自调用Clipboard函数返回值为一个对象,该对象有一个copy方法,将该对象挂到全局window上,以便在项目的任何地方都能使用window.Clipboard = (function (window, d.原创 2020-12-01 16:19:06 · 844 阅读 · 0 评论 -
js复制文本到剪切板
思路创建文本域,并把需要复制的字符串赋值给value属性选中(聚焦)文本域执行复制操作document.execCommand('Copy')实现/** * @param url 需要复制的字符串 * @param success 复制成功的回调 * @param error 复制失败的回调 */export const copyStr = (url: string, success?: () => void, error?: () => void) => {原创 2021-08-18 14:03:34 · 214 阅读 · 0 评论 -
自上而下获取父节点的id的集合
自下而上获取父节点的id的集合,包括它自己的id例如:查找根据西湖区的id查找浙江省id,杭州市id,并根据这些id组成一个集合思路从根节点开始递归遍历,直到找到西湖区,每遍历一次就保存一次id实现const getParentIds = <T, K>(treeData: T[], key: K): string[] => { let pids: string[] = []; const fn = (treeData: T[], key: K, id?: string原创 2021-08-18 13:51:49 · 193 阅读 · 0 评论 -
查找树形数据的某个值
很多场景都需要使用树形数据,比如:一级菜单 - 二级菜单、省-市-区、公司-部门-小组、界-门-纲-目-科-属-种 等等。数据结构通常如下所示(以下代码为ts写法):const groupList: Group[] = [ { groupId: '0', groupName: '江西省', isDefaultGroup: '0', children: [ { groupId: '0-0', groupName: '赣州市.原创 2021-07-06 15:31:26 · 1382 阅读 · 0 评论 -
将列表数据转换为树形数据
问题有的时候接口可能会给你列表数据,如何将列表数据转化为树形数据呢???比如:转换为:思路:递归遍历找到children,如果当前项的pid等于传入的id,说明当前项是传入id对应项的子节点闭包保存每次遍历的children实现一下为ts写法步骤详解const tranListToTreeData = <T, K>(list: T[], rootValue: string): K[] => { // 存放子节点的数据 let arr: K[] = [];原创 2021-08-18 11:23:57 · 1649 阅读 · 0 评论