2020-07-03：web前端使用原生js实现图片滑轮滚动放大缩小、vue项目中使用scoped、用el-date-picker回显、json文档的解析、HTML、this指向

1、vue项目中使用scoped

当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。

出现样式失效问题

:scss的样式穿透,在样式的选择器前加上 /deep/
使得.vue中的样式不影响其他.vue组件样式，而不是scoped使得.vue组件样式不受外样式影响。(组件中自己是有scoped的)
scoped 只会作用于自组件的根组件。
vue加scoped后无法修改样式（无法修改element UI 样式）

2、用el-date-picker时，回显成功，但是修改不了

【vue】使用el-date-picker遇到的坑：回显后无法更新数据

在dialog里面的使用，因为dialog里面有懒加载

const data1 = this.workPointForm.planStartDate ? [new Date(this.workPointForm.planStartDate), new Date(this.workPointForm.planEndDate)] : []
const data2 = this.workPointForm.startDate ? [new Date(this.workPointForm.startDate), new Date(this.workPointForm.endDate)] : []
this.$set(this.workPointForm, 'planDate', data1)
this.$set(this.workPointForm, 'startAndEndDate', data2)

3、json文档的解析

json文件放在static文件夹里，然后ajax进行请求使用

1.png

4、echarts 数据重新加载,原数据依然存在图表上

多次调用时option选项默认是合并（merge）的，加上true表示不合并配置
echarts.setOption(option, true)

5、web前端使用原生js实现图片滑轮滚动放大缩小

6、el-row

el-row的gutter属性来指定每一栏之间的间隔，默认间隔为 0。

7、HTML

map进行图上点的点击效果设置

1.png

1.png

分别量取所需设定点的原点 半径（param.x param.y param.r）

1.png

document.getElementById(${item.value}).setAttribute('coords', '' + x1 + ',' + y1 + ',' + r1 + '') 设置每个点对应的图像映射点

1.png

监听resize事件

8、定时器中this的指向问题