日常开发问题记录

cavans转换成图片下载到本地

canvas对象有一个toDataURL()，它可以吧画布里的图案转变成base64编码格式的png 然后返回Dataurl 数据
```
    var strDataURI = oCanvas.toDataURL();// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..." 
```

获取元素位置的方法集合

• 几个属性的定义MDN element API传送门

1. scrollLeft 元素向左滚动的距离
2. scrollTop 元素向上滚动的距离
3. scrollHeight 元素真正的高度，包括在视图外的高度（如果有滚动条的话）

getBoundingClientRect

该方法返回一个矩形对象，其中四个属性：left、top、right、bottom，分别表示元素各边与页面上边和左边的距离，x、y表示左上角定点的坐标位置。

通过这个方法计算得出的left、top、right、bottom、x、y会随着视口区域内滚动操作而发生变化，如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置。

数字分隔符

可以使用下划线作为数字分隔符，这样可以方便地计算数字中0的个数。

// 难以阅读
const billion = 1000000000;

// 易于阅读
const readableBillion = 1000_000_000;

console.log(readableBillion) //1000000000

z-index 总结

1. 只有设置了定位(相对定位、绝对定位、固定定位)的元素设置z-index 才有效
2. z-index 具有从父特点，就是它父级层级会影响子级的层级，即： 父节点的z-index值很小，无论子节点的z-index值多大，其层级仍然小

层叠顺序

层级由低到高：1.标准流盒子 < 浮动盒子 < 定位盒子
2.background/border < 负z-index < block块状水平盒子 < float浮动盒子 < inline/inline-block水平盒子 < z-index：0 < 正index

快速获取时间戳

    let time = +new Date()

v-show 切换tab echarts 图表显示不全

解决方案：等切换回来后再异步中进行图表重绘

     this.$nextTick(() => {
        const myChart = this.$echarts.init(document.getElementById('myChart'))
        myChart.resize();
      })