2022 年工作记录

---

十一月

配置 Mac 的终端

• terminal 替代软件 itern2
• 安装 oh my zsh，shell 的衣服
• 安装主题 Powerlevel10k
• 重新配置 p10k configure

九月

forEach 不能用 Async

是因为 Async 没有处理 promise

八月

react中 input自动失去焦点解决办法和原因

参考博客

七月

iconfont SVG 图片颜色的修改

首先我在iconfont 中找好图标后，下载下来

然后通过封装好的组件进行使用

封装的组件如下：

原理也是通过 style 去修改颜色，但是我修改的样式不好使

原因是因为这个图标有固定写死 fill 属性。

参考文章

---

Jointjs 中的选择节点思路

可以在鼠标按下、移动、抬起这个过程中生成一个元素

/**
 * 选择多节点
 * - 绘制选择框 $selectionArea
 */
handleSelectNodes = () => {
  const selectRect = new joint.shapes.basic.Rect({
    //绘制元素
    position: { x: 100, y: 70 },
    size: { width: 100, height: 30 },
    attrs: {
      rect: {
        fill: "#3498DB", // 背景颜色
        stroke: "#3498DB", // 边框颜色
        // stroke: "#2980b9", // 边框颜色
        opacity: 0.3,
        
      },
    },
  });
  let startX = 0, startY = 0;
  paper.on("blank:pointerdown", (evt, x, y) => {
    graph.addCells([selectRect]); // 添加选取框元素
    selectRect.position(x, y);
    selectRect.size(0, 0);
    startX = x;
    startY = y;
  })
  paper.on("blank:pointermove", (evt2, x2, y2) => {
    selectRect.size(x2 - startX, y2 - startY);
  });
  paper.on("blank:pointerup", (evt2, x3, y3) => {
    graph.removeCells([selectRect]);
    const endX = x3;
    const endY = y3;
    const selectAreaX = [Math.min(startX, endX),Math.max(startX, endX)]
    const selectAreaY = [Math.min(startY, endY),Math.max(startY, endY)]
    const [xa1, ya1] = [selectAreaX[0], selectAreaY[0]];
    const [xa2, ya2] = [selectAreaX[1], selectAreaY[1]];
    this.handleFindNodeInSelect(xa1, ya1, xa2, ya2);
  });
  this.handleMoveCellNodes();
}

---

拖拽

拖拽的话有如下几种，

• css 通过 transform 控制
• 定位

getInfo = (e, dragEl) => {
  // 获取元素当前的偏移量
  const translateStr = dragEl[0].style.transform;
  const reg = /[-+]?\d+(?:\.\d+)?/g;
  const translateArr = translateStr.match(reg);
  const tx = Number(translateArr[0]);
  const ty = Number(translateArr[1]);
  // 记录鼠标的起始位置
  const startX = e.clientX;
  const startY = e.clientY;
  return {
    tx,
    ty,
    startX,
    startY,
  }
}

// 画布拖动
dragCanvas = () => {
  const $PAPER = $("#paper");
  paper.on("blank:pointerdown",  (evt) =>  {
    const { tx, ty, startX, startY } = this.getInfo(evt, $PAPER);
    $PAPER.css("cursor", "grabbing");
    $PAPER.on("mousemove",  (evt2) => {
      const distanceX = tx + evt2.clientX - startX;
      const distanceY = ty + evt2.clientY - startY;
      $PAPER.css('transform',`translate(${distanceX}px, ${distanceY}px)`)
    });
  });
  paper.on("blank:pointerup",  () =>  {
    $PAPER.css("cursor", "grab");
    $PAPER.off("mousemove");
  });
}

React 中的 div 点击空白处控制隐藏

思路是在document 上绑定一个关闭事件，在按钮上绑定一个显示div 的事件，这两个事件控制一个变量 isShow 来控制 div 的显示隐藏。

showListSetting = (e) => {
  e.nativeEvent.stopImmediatePropagation(); // 阻止冒泡
  this.setState({
    visibleList: true
  })
}

closeListSetting = () => {
  this.setState({
    visibleList: false
  })
}

五月

组件通过 @connect 连接后拿不到 ref 的解决办法

@connect (() => ({}), null, null, { withRef: true})

参考博客

this.assetsearch2.getWrappedInstance()

似乎升级到React 17 之后需要用 wrappedInstance 获取子组件的方法了。

dva

设置

setSearchAssetCondition(state, { payload }){
  console.log('assetManage payload:>>', payload);
  return {
    ...state,
    searchAssetCondition: payload || '',
  };
}

@connect(({}) => ({}))
// 保存到 redux
dispatch({
  type: 'assetManage/setSearchAssetCondition',
  payload: encodeValue,
  callback:()=>{
    handleSearchAssetTable(encodeValue);
  }
});

取值：从props里取值

    const {searchAssetCondition} = this.props;
    console.log('searchAssetCondition:>>', searchAssetCondition);

Select 根据父元素

解决如下的问题

在 Select 组件上添加如下的属性

getPopupContainer={triggerNode=>triggerNode.parentNode} 
// 就会相对于父元素定位9

四月

moment 时间对象

在用 antd 时候有个 RangePicker，其中的 value 属性需要默认一个数组