在使用Vue.js开发时，遇到一个棘手的问题：当离开包含ECharts地图的大屏展示页面并调整窗口大小时，出现`Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'`错误。经过排查，发现错误源于浏览器后退时DOM元素已被销毁，而resize事件仍然监听。尝试禁用keep-alive并未解决问题。最终解决办法是在resize监听器内检查DOM元素是否存在，避免在已销毁的页面上调用ECharts的resize方法。但作者认为可能存在更优的解决方案，如限制监听范围或完全销毁页面及其相关函数。
前端小白记录Vue踩到的坑。
首先这是公司另一位已经离职同事的代码，然后大屏展示页面是用jq引入了一个地图样式。
进入大屏展示都是没什么问题的，看起来一切都十分完美。
但是！！！！
问题出来了！
当我离开大屏展示页面，调整窗口大小的时候，无数个
Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’；
就来了！
我在网上各种搜索，都说是图片路径问题或者v-show/v-if控制的dom元素隐藏和销毁的区别。
但是重点是，我是用的浏览器自带的后退按钮，哪来的v-show和v-if啊！！
问题的确是返回后，dom元素销毁，调整窗口大小的时候，已经没有那个元素作为canvas的容器了，当然就报错了。以下是问题代码：
window.addEventListener("resize", function (
1183
905
7952
3836
3375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
扫一扫
