luckysheet与superslide冲突解决

[现象]控制台报错、界面无法操作

在这里插入图片描述
$是jquery。查看源码,发现mousewheel方法来自插件mousewheel,luckysheet初始应该会将mousewheel挂载在jquery上。

在控制台打印jquery取dom及其方法,结果如下:
在这里插入图片描述
不存在mousewheel方法,因此推断一种可能性是jquery被覆盖了。

通过查找package-lock.json排查项目内有哪些插件使用了jquery:

在这里插入图片描述
找到只有vue-superslide,遂将其注释运行:
在这里插入图片描述发现luckysheet功能正常了。

[解决思路]

luckysheet和superslide从原先的项目初始化即加载修改为只有进入对应页面时才加载,在离开页面时卸载
使用luckysheet的组件
使用luckysheet的组件
这样一来luckysheet功能正常了。
在这里插入图片描述

但随之而来发现使用vue-superslide的控件报错了
在这里插入图片描述
且在离开页面,dom销毁后,错误继续在报,因此推断有两个问题:1、luckysheet引入的jquery覆盖了superslide的jquery原有挂载的方法,导致找不到easing方法。2、superslide插件在dom销毁后未清除定时器,存在内存泄漏。

问题1的解决:复制并改写vue-superslide引用的superslide源码,做为模块export
在这里插入图片描述
复制并改写vue-superslide,将原先的一次性导入修改为每次导入
注释掉
每次mounted都导入执行,相当于重新初始化了superslide
这样一来只要再次进入页面,superslide所需的jquery方法就又挂载上了。

问题2的解决:找到对应的定时器位置
源码

inter是闭包内的变量,在外部无法获取到。销毁定时器需要拿到inter,所以需要将inter暴露出去。
利用slider,表示调用的当前dom元素
在生成定时器时存储到当前dom的data
新增一个清除定时器的方法
然后在外部(vue-superslide)销毁时调用清除定时器方法

在这里插入图片描述
当离开vue-superslide对应页面时,dom销毁,定时器销毁:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/491326.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MongoDB(上)

MongoDB 基础 MongoDB 是什么? MongoDB 是一个基于 分布式文件存储 的开源 NoSQL 数据库系统,由 C 编写的。MongoDB 提供了 面向文档 的存储方式,操作起来比较简单和容易,支持“无模式”的数据建模,可以存储比较复杂…

搭建Tomcat(四)---Servlet容器

目录 引入 Servlet容器 一、优化MyTomcat ①先将MyTomcat的main函数搬过来: ②将getClass()函数搬过来 ③创建容器 ④连接ServletConfigMapping和MyTomcat 连接: ⑤完整的ServletConfigMapping和MyTomcat方法: a.ServletConfigMappin…

构建一个rust生产应用读书笔记四(实战3)

从这一节开始,我们将继续完善邮件订阅生产级应用,根据作者的选型sqlx作为数据库操作的类库,它有如下优点: 它旨在提供高效、安全且易于使用的数据库交互体验。sqlx 支持多种数据库,包括 PostgreSQL、MySQL 和 SQLite&…

网络安全-------防止被抓包

1.Ios应用网络安全之https 安全套接字层 (Secure Socket Layer, SSL) 是用来实现互联网安全通信的最普遍的标准。Web 应用程序使用 HTTPS(基于 SSL 的 HTTP),HTTPS 使用数字证书来确保在服务器和客户端之间进行安全、加密的通信。在 SSL 连接…

WebSocket 与 Server-Sent Events (SSE) 的对比与应用

目录 ✨WebSocket:全双工通信的利器📌什么是 WebSocket?📌WebSocket 的特点📌WebSocket 的优点📌WebSocket 的缺点📌WebSocket 的适用场景 ✨Server-Sent Events (SSE):单向推送的轻…

CAD c# 生成略缩图预览

代码如下: using (Transaction tr currentdb.TransactionManager.StartTransaction()){//当前数据库开启事务using (Database tempdb new Database(false, true)) //创建临时数据库(两个参数:是否创建符号表,不与当前文档关联){try{Bitmap …

娱乐五子棋(附加源码)

一写在开头 上期代码主要实现瀑布流功能,本期就来实现五子棋小游戏,开发久了很多功能都是通过框架组件库来完成,但是如果组件满足不了开发需求,还需要开发人员手动封装组件,专门出这样一期文章,通过原生js实…

XMOS将在CES 2025上展出多款由边缘AI驱动的创新音效、音频、识别和处理解决方案

全球智能物联网技术领导者暨匠心独到的半导体科技企业XMOS宣布:该公司将再次参加2025年国际消费电子展(CES 2025),并将在本届CES上展出一系列由人工智能(AI)驱动的全新空间音效、语音捕获与降噪、音视频多模…

HCIA-Access V2.5_2_2_2网络通信基础_IP编址与路由

网络层数据封装 首先IP地址封装在网络层,它用于标识一台网络设备,其中IP地址分为两个部分,网络地址和主机地址,通过我们采用点分十进制的形式进行表示。 IP地址分类 对IP地址而言,它细分为五类,A,B,C,D,E,…

我的数据仓库与数据挖掘期末大作业重置版

文章目录 我的数据仓库与数据挖掘期末大作业重置版准备工作预设定及导入相对应的库库的导入调整 Jupyter Notebook 的预设定调整 MatPlotLib 和 Pandas 的输出设置 任务 1:预测问题数据的保存和读取数据的分析和预处理模型的选择和构建线性回归一元多项式回归 拟合预…

CUDA C编程权威指南习题解析

文章目录 一、1.6节习题二、2.6习题三、四、五、六、 一、1.6节习题 1.参考图1-5,分析以下几种数据划分形式: (1)对于二维数据,沿x轴进行块划分 (2)对于二维数据,沿y轴进行周期划…

cocos creator 的 widget组件的使用及踩坑

以下的内容基于cocos creator 3.8版本,如有错误,恳请指出。 👉官方文档的指引 应用:以上官方指引有非常清晰的使用方式,接下来说明一些注意事项: 1、与canvas搭配的使用,解决多分别率适配问题。…

PHP搭建环境

一、安装apache 1、获取Apache安装软件 2、双击安装即可:指定对应的路径:E:server/apache 3、选择安装模式:使用自定义模式 4、选择安装位置 二、Apache的目录结构说明 三、Httpd.exe的详细应用 1、服务器进程:运行之后才能够工作

微积分复习笔记 Calculus Volume 2 - 4.1 Basics of Differential Equations

4.1 Basics of Differential Equations - Calculus Volume 2 | OpenStax

0003.基于springboot的“共享书角”图书借还管理系统

适合初学同学练手项目,部署简单,代码简洁清晰; 一、系统架构 前端:vue| elementui| 微信小程序 后端:springboot | mybatis-plus 环境:jdk1.8 | mysql | maven 系统设计说明: 二、代码及数据库 1.管理…

python学opencv|读取图像(十二)BGR图像转HSV图像

【1】引言 前述已经学习了opencv中图像BGR相关知识,文章链接包括且不限于下述: python学opencv|读取图像(六)读取图像像素RGB值_opencv读取灰度图-CSDN博客 python学opencv|读取图像(七)抓取像素数据顺利…

音频进阶学习八——傅里叶变换的介绍

文章目录 前言一、傅里叶变换1.傅里叶变换的发展2.常见的傅里叶变换3.频域 二、欧拉公式1.实数、虚数、复数2.对虚数和复数的理解3.复平面4.复数和三角函数5.复数的运算6.欧拉公式 三、积分运算1.定积分2.不定积分3.基本的积分公式4.积分规则线性替换法分部积分法 5.定积分计算…

智能高效的IDE GoLand v2024.3全新发布——支持最新Go语言

GoLand 使 Go 代码的阅读、编写和更改变得非常容易。即时错误检测和修复建议,通过一步撤消快速安全重构,智能代码完成,死代码检测和文档提示帮助所有 Go 开发人员,从新手到经验丰富的专业人士,创建快速、高效、和可靠的…

SQL server学习06-查询数据表中的数据(中)

目录 一,聚合函数 1,常用聚合函数 2,具体使用 二,GROP BY子句分组 1,基础语法 2,具体使用 3,加上HAVING对组进行筛选 4,使WHERE记录查询条件 汇总查询:在对数…

游戏引擎学习第52天

仓库 : https://gitee.com/mrxiao_com/2d_game 这节的内容相当多 回顾 在游戏中,实体被分为不同的类别:接近玩家的“高频实体”、距离较远并正在模拟的“低频实体”和不进行更新的“休眠实体”。这些实体会根据它们与玩家的距离进行处理,接…