开发遇到的诡谲

开发过程中总会遇到一些风云诡谲的不可名状的光怪陆离。

vite页面中子组件热更新失效

子组件引入或者使用大小写写错了。

vscode发疯

包括不限于各种奇葩问题，这里比较有代表的是格式化工具坏了。

• 可能是多个vscode打开以后配置不一致，让他抽筋了，关到剩下一个配置好再打开

nginx访问

如果你的 127.0.0.1:3000/api 可以访问，但是 127.0.0.1:3000/api/getip 这种接口不可以访问，给 nginx 配置中 /api 改为 /api/,具体原因可以看 这里

分号陷阱？

es6很多写法少了尾巴的分号会遇到神奇的东西，比如：

const arr = [1, 2];
arr.push(3);
[arr[0], arr[1]] = [arr[1], arr[0]];
console.log(arr); // 输出[2, 1, 3]

const arr = [1, 2];
arr.push(3)
[arr[0], arr[1]] = [arr[1], arr[0]];
console.log(arr); // 输出[1, 2, 3]

滚动条多了几像素？

随便说个例子吧，vue中外部div高度为400px,内部生成200个height为20px的div，滚动条滚到最后会发现scorllHeight是4004px.

• 给内部的每个div设置line-height为20px就好了

html2canvas问题

使用html2canvas对父元素存在transform:scale的子元素进行转换的时候，必须吧父元素的scale(1)设置为1，否则会出现展示不全或者展示超过的现象，为了解决这个问题，其实有另个一个方案：

html2canvas(ele, {
    backgroundColor: 'transparent',
    width: width,
    height: height,
    onclone: function (documentClone: any) {
        documentClone.querySelector('.go-edit-range').style.transform = 'scale(1)';
    }
}).then((canvas) => {

})

初步估计应该是用onclone生成了抽象语法树复制了一份dom，然后单独对这个东西进行了渲染，最后转canvas以后再做销毁。