VUE 单页面使用 echart 窗口变化时的使用
在 VUE 项目中,为了使 echart 在窗口变化时能够自适应,要用到 window.resize = function(){ .......}; 但是我在项目刚开始的时间就有一个地方的高度变化使用了 window.resize ,在里面再次使用 会覆盖掉原来的,所以在里面图表使用时可以用window.addEventListener('resize',this.resizeFu
·
在 VUE 项目中,为了使 echart 在窗口变化时能够自适应,要用到 window.resize = function(){ .......};
但是我在项目刚开始的时间就有一个地方的高度变化使用了 window.resize ,在里面再次使用 会覆盖掉原来的,所以在里面图表使用时可以用
window.addEventListener('resize',this.resizeFu,false);
resixeFu 就是图表变化时的方法
resizeFu(){
let div = document.getElementById('changeData');
if(div && this.changeData.DataTime.length>0){
this.chartsDiv.changeData.resize();
}
}
但里面有一个问题就是:每次进来当前页面都会执行 window.addEventListener
解决方法是在路由勾子函数中把它给去掉,方法是
beforeRouteLeave(to, from, next) {
//页面走掉把事件给清除掉
window.removeEventListener("resize", this.resizeFu,false);
next()
},
更多推荐
已为社区贡献17条内容
所有评论(0)