自留写代码技巧：

@change=“e=>handleSettingCahnge('navTheme',e.target.value)”

在路由上面同步信息到页面   ...this.$route.query   保持原来的路由不改变

 

 

 

 

 

 

 设置用户访问权限：meta {   }元组建配置， 之后去路由守卫设置

　　　　写代码小技巧：if( ) {   }括号里面尽量多写两个判断

 

 

 

 

 

 

 echart.js学习 封装普通第三方库

1. npm  install  echarts

2.在mounted里面使用 复制的echart代码 初始化实例

3.样式会出问题，加载速度问题，宽度会溢出，引入第三方库 （resize-detector）监听echart容器大小

 

 

 

.resize（[eventData]，handler）

eventData:一个对象，其中包含将传递给事件处理程序的数据。【输入】例：待改变dom容器的对象

handler：

.resize（）该resize事件被发送到window当浏览器窗口大小的变化元素，实例，对浏览器窗口调整大小进行计数。

当调整浏览器窗口的大小时，发生 resize 事件。

resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。

 

 

第二步骤：引入 ， 监听，销毁

销毁：1.移除事件监听  2.echart实例销毁  目的：防止内存泄漏

 

 

第三步：引入， 监听， 销毁，防抖

因为窗口变化会触发很多次resize()窗口大小改变，所以要防抖处理

vue 使用Lodash 的throttle（节流）与debounce（防抖:命令安装  npm i --save lodash )

 

  第三步：引入， 监听， 销毁，防抖, 图表渲染

将echart里面的数据换掉，优化：尽量将echart提成单独组件，prop 传递数据

填充数据：

 

 

 

注意：使用定时器的时候，关闭页面的时候要销毁

Vue style 深度作用选择器 >>> (css)  与 /deep/（sass/less）的区别

 

 

注意事项：1.引入的监听事件要销毁  2.引入的echart组建要销毁  3.定时器需要销毁clearinterval(this.)  目的：防止内存泄漏

trigger() 方法触发被选元素的指定事件类型。

$(selector).trigger(eventObj) eventObj必需。 规定事件发生时运行的函数。