[现象]控制台报错、界面无法操作
$是jquery。查看源码,发现mousewheel方法来自插件mousewheel,luckysheet初始应该会将mousewheel挂载在jquery上。
在控制台打印jquery取dom及其方法,结果如下:
不存在mousewheel方法,因此推断一种可能性是jquery被覆盖了。
通过查找package-lock.json排查项目内有哪些插件使用了jquery:
找到只有vue-superslide,遂将其注释运行:
发现luckysheet功能正常了。
[解决思路]
luckysheet和superslide从原先的项目初始化即加载修改为只有进入对应页面时才加载,在离开页面时卸载
这样一来luckysheet功能正常了。
但随之而来发现使用vue-superslide的控件报错了
且在离开页面,dom销毁后,错误继续在报,因此推断有两个问题:1、luckysheet引入的jquery覆盖了superslide的jquery原有挂载的方法,导致找不到easing方法。2、superslide插件在dom销毁后未清除定时器,存在内存泄漏。
问题1的解决:复制并改写vue-superslide引用的superslide源码,做为模块export
复制并改写vue-superslide,将原先的一次性导入修改为每次导入
这样一来只要再次进入页面,superslide所需的jquery方法就又挂载上了。
问题2的解决:找到对应的定时器位置
inter是闭包内的变量,在外部无法获取到。销毁定时器需要拿到inter,所以需要将inter暴露出去。
然后在外部(vue-superslide)销毁时调用清除定时器方法
当离开vue-superslide对应页面时,dom销毁,定时器销毁: