Leanote's Blog
获取dom到body左侧和顶部的距离
2023-04-17 11:30:32    23    0    0

getBoundingClientRect方法简介

getBoundingClientRect 返回的是一个 DOMRect 对象，是一组矩形集合，我们这次所使用的返回值主要是left、top、bottom和right。其余的返回值width、height、x、y这次用不到,就不再讨论。
使用方法如下：

  1. let domToTop = dom.getBoundingClientRect().top  // dom 的顶边到视口顶部的距离
  2. let domToLeft = dom.getBoundingClientRect().left // dom 的左边到视口左边的距离
  3. let domToBottom = dom.getBoundingClientRect().bottom // dom 的底边到视口顶部的距离
  4. let domToRight = dom.getBoundingClientRect().right // dom 的右边到视口左边的距离

注意事项：

  1. 得到的值是相对于视口而言的，即如果页面的滚动位置发生变化，那么得到的top、left也会发生变化；如果需要计算到body边框的距离，需要再加上网页滚动条的长度。下面会给出完整例子。
    这个方法返回的四个值都是相对于当前视口的左上角而言的。即top和bottom是dom的顶边和底边到视口的顶部的距离，同理left和right是相对于视口左边的距离。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .box {
  8.             width: 110%;
  9.             height: 200%;
  10.             position: absolute;
  11.             top: 0;
  12.             left: 0;
  13.             border: 1px solid red;
  14.         }
  16.         .content {
  17.             width: 20%;
  18.
react的keep-alive
2023-04-02 17:44:14    30    0    0

推荐以下两种手动保存状态的方式

  1. 将需要保存状态组件的state提升至父组件中保存。
  2. 使用 css visible 属性(display还是content-visibility ? )来控制需要保存状态组件的渲染，而不是使用 if/else ，避免React将其卸载。

目前市面上自动状态保存库主要从两方面下手：

  1. 改变路由机制，通常基于 React-Router 二次开发。React-Router 在路由切换时默认卸载非活动组件，因此这些库通过重写 React-Router 中的部分功能或者将其拓展的方式使得在路由切换时相关组件不被直接卸载，而是缓存下来。这种实现方式决定了状态保存的粒度只能具体到SPA的页面级别。
  2. 改变React组件被移除的方式。React在组件被移除时默认是被卸载的，这些库通过某些方式阻止或欺骗React使相关组件在移除时不被直接卸载，而是缓存下来。通过这种实现方式，状态保存的粒度可以精细到组件级别。
  3. React官方在一些关于 strict mode 的回复中提到了其正在开发的 <Offscreen> 组件，并且预计其在 react@18.X（非18早期版本）中可能会出现，其功能与vue <keep-alive> 类似。

根据对目前市场上存在的相关解决方案的调研，这里给出以下几点建议：

  • 如果项目中需要状态缓存处理的数据量较小，那最好还是按照React官方的建议，手动解决状态缓存问题。
  • 如果处理数据量较大，且缓存粒度为页面级别，那么推荐使用 react-router-cache-route。
  • 如果处理数据量较大，且缓存粒度为组件级别，或者你的项目框架采用了umi（无法直接触及react-router），或者干脆没有使用react-router路由，那么推荐使用 react-activation 。此外umi中使用 react-activation 可以直接使用其封装插件 umi-plugin-keep-alive。
vue+google map
2023-03-27 07:07:05    15    0    0
photoshop在线
2023-03-27 06:21:21    13    0    0

在线photoshop网站

  1. https://ps.gitapp.cn/
  2. https://photoshop.adobe.com/discover
  3. https://photoretrica.com/cn/photoshop
  4. Web版Photoshop来了，用到了哪些前端技术？

photoshop下载地址

https://pan.xunlei.com/s/VOCltq5kfVniiVankXAkv3VuA1?pwd=23m7&path=%2FAdobe%202025%20%E7%8B%AC%E7%AB%8B%E7%89%88%EF%BC%88%E6%8C%81%E7%BB%AD%E5%85%B3%E6%B3%A8%EF%BC%8C%E5%90%8E%E7%BB%AD%E4%BC%9A%E6%9B%B4%E6%96%B0%E6%96%B0%E7%89%88%E6%9C%AC%E5%92%8C%E6%95%99%E7%A8%8B%EF%BC%89

windows设置默认中英文符号
2023-03-23 17:03:03    13    0    0
  1. 语言设置开启中文输入时使用英文标点
  2. 如1不行, 设置 -> 外观 -> 打开输入法工具栏 -> 点击工具栏标点符号来切换 -> 关闭输入法工具栏
TS常见问题
2023-03-23 16:57:34    24    0    0

箭头函数在.tsx添加泛型报错

如:

  1. // a.tsx
  2. // 箭头函数添加泛型报错(Error: JSX element ‘T’ has no corresponding closing tag.ts(17008))
  3. const foo = <T>(props: T)=> void

原因: 因为泛型的语法与 JSX 的语法冲突，导致 TS 解析成 JSX 而产生 unexpected token 的问题

解决:
1. 不要写在 .tsx 文件里面就不会报错
2. 在后面加一个逗号就能正确解析了
3. 

  1. const foo = <T,>(props: T)=> void
TS二选一
2023-03-21 17:04:57    30    0    0
react中常用的ts类型大全
2023-03-21 06:59:20    19    0    0

https://zhuanlan.zhihu.com/p/457217602
React TypeScript 速查表

获得组件的props类型

React.ComponentProps<typeof Button>

TS内置类型

  1. ConstructorParameters ：类构造函数参数类型的元组
  2. Exclude：将一个类型从另一个类型排除
  3. Extract：选择可分配给另一类型的子类型
  4. InstanceType：从一个新类构造函数中获得的实例类型
  5. NonNullable：从类型中排除空和未定义
  6. Parameters：函数的形参类型的元组
  7. Partial：使对象中的所有属性都是可选的
  8. Readonly：将对象中的所有属性设置为只读
  9. ReadonlyArray：创建给定类型的不可变数组
  10. Pick：对象类型的一种子类型，包含其键的子集
  11. Record：从键类型到值类型的映射
  12. Required：使对象中的所有属性都是必需的
  13. ReturnType：函数的返回类型
any，never，void和unknown的区别
2023-03-20 16:58:27    9    0    0

any

当我们将某个变量定义为 any 类型后，TypeScript 将会跳过对这个变量的类型检查

unknown

TypeScript 在3.0版本引入了 unknown 类型，它可以理解为类型安全的 (type-safe)any

  • 任何类型都可以赋值给 unknown 类型的对象
  • unknown 类型的对象不可以直接赋值给其它非 unknown 或 any 类型的对象，并且不可以访问上面的任何属性

never

never 就是 TypeScript 的底部类型

  • never 类型只接受 never 类型的对象, any 也不接受
  • never 会从联合类型中移除，类似于将零和其他数字相加时结果等于该数字。即 type Res = never | string // string
  • never 会覆盖交叉类型中的其他类型，类似于零乘其他数字时结果等于零。即 type Res = never & string // never

void

void 其实可以理解为 null 和 undefined 的联合类型，它表示空值

Tree组件子节点不完全勾选获取父节点的值
2023-03-06 18:48:29    33    0    0

父节点如果有回显的情况下

1.循环遍历出最深层子节点，存放在一个数组中
2.将后台返回的含有父节点的数组和第一步骤遍历的数组做比较
3.如果有相同值，将相同值取出来，push到一个新数组中
4.利用这个新的重组的数组给Tree组件selected赋值

  1. const deepArr = []   //deepArr存放所有子节点的数组
  2. //第一步骤：子节点放在一个数组中
  3. const requestList = (data) => {
  4.   data && data.map(item => {
  5.     if (item.children && item.children.length > 0) {
  6.       requestList(item.children)
  7.     } else {
  8.       deepArr.push(item.id)
  9.     }
  10.     return null
  11.   })
  12.   return deepArr
  13. }
  15. //第2，3步骤的方法
  16. const uniqueTree = (uniqueArr, Arr) => {
  17.   let uniqueChild = []
  18.   for (var i in Arr) {
  19.     for (var k in uniqueArr) {
  20.       if (uniqueArr[k] === Arr[i]) {
  21.         uniqueChild.push(uniqueArr[k])
  22.       }
  23.     }
  24.   }
  25.   return uniqueChild
  26. }
  27. //调用第2，3步骤的方法
  28. const getRoleInfo = () => {
  29.   getData({ id: Id }).then(res => {
  30.     const ids = res.data
  31.     const uniqueChild = this.uniqueTree(ids, deepArr)
  32.     setCheckedKeys(uniqueChild)
  33.   })
  34. }
  36.   <Tree
  37.     checkable
  38.     checkedKeys={checkedKeys}
  39.     defaultExpandedKeys={checkedKeys}
  40.     fieldNames={{
2/18
Proudly powered by Leanote