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销毁,定时器销毁:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

windows使用python写的YOLO来实现目标识别

使用labelImg标注,YOLO进行目标训练 一、labelImg工具下载及使用1、下载labelImg(目标标注工具[【点我下载】](https://github.com/HumanSignal/labelImg))2、使用labelImg 二、下载及使用YOLO1、下载及使用ultralytics(volo[点击…

Java——多线程(上)

一 (线程的介绍) 1 多线程的基本概念 (每个进程由三部分构成——>CPU,Data,Code,进程之间完全独立,内存隔离) (运行在进程内的,一个进程可以包含多个线程,线程之间是可以并行的,并且共享相…

SpringBoot3+graalvm:整合并打包为可执行文件

原文网址:SpringBoot3graalvm:整合并打包为可执行文件-CSDN博客 简介 本文介绍SpringBoot3如何整合graalvm,并打包为可执行文件。Windows和Linux都打包。 版本 springboot3.3.6 graalvm21(包含JDK21(21是最新的LT…

【Bolt.new + PromptCoder】三分钟还原油管主页

【Bolt.new PromptCoder】三分钟还原油管主页 PromptCoder官网:PromptCoder Bolt官网:https://bolt.new/ Bolt 是什么? Bolt.new 是一个提供创建全栈网络应用服务的平台。它允许用户通过提示(Prompt)、运行&#x…

ubuntu下anconda装pytorch

1、禁用nouveau sudo vim /etc/modprobe.d/blacklist.conf 在文件最后部分插入以下两行内容 blacklist nouveau options nouveau modeset0 更新系统 sudo update-initramfs -u 重启系统 2、装nvidia驱动 卸载原来驱动 sudo apt-get remove nvidia-* (若安装…

QT数据库(四):QSqlRelationalTableModel 类

关系数据库概念 例如下列departments、majors、studInfo 这 3 个数据表之间存在关系。 主键与外键 标记“**”的是主键字段,标记“*”的是外键字段。主键字段是一个数据表中表示记录唯一性的字段,例如 studInfo 数据表中的 studID 字段。外键字段是与其…

【Linux】-学习笔记10

第八章、Linux下的火墙管理及优化 1.什么是防火墙 从功能角度来讲 防火墙是位于内部网和外部网之间的屏障,它按照系统管理员预先定义好的规则来控制数据包的进出 从功能实现角度来讲 火墙是系统内核上的一个模块netfilter(数据包过滤机制) …

SpringBoot 手动实现动态切换数据源 DynamicSource (中)

大家好,我是此林。 SpringBoot 手动实现动态切换数据源 DynamicSource (上)-CSDN博客 在上一篇博客中,我带大家手动实现了一个简易版的数据源切换实现,方便大家理解数据源切换的原理。今天我们来介绍一个开源的数据源…

Crawl4AI:一个为大型语言模型(LLM)和AI应用设计的网页爬虫和数据提取工具实战

这里写目录标题 一、crawl4AI功能及简介1、简介2、特性 二、项目地址三、环境安装四、大模型申请五、代码示例1.生成markdown2.结构化数据 一、crawl4AI功能及简介 1、简介 Crawl4AI 是一个开源的网页爬虫和数据抓取工具,一个python项目,主要为大型语言…

【银河麒麟高级服务器操作系统】有关dd及cp测试差异的现象分析详解

了解更多银河麒麟操作系统全新产品,请点击访问 麒麟软件产品专区:https://product.kylinos.cn 开发者专区:https://developer.kylinos.cn 文档中心:https://documentkylinos.cn dd现象 使用银河麒麟高级服务器操作系统执行两次…

sqli-labs靶场第26-30关

第26关 这关将逻辑运算符,注释符以及空格给过滤了 我们先使用单引号进行闭合 这时我们查看源代码可以看到这一关过滤了很多字符 可以看到这里将or and / -- # 空格等字符都被注释了 空格被过滤了我们可以使用()来代替,and和or可以使用双写来绕过 因为…

ik分词器了解 和 通过zip安装包的方式 将ik分词器安装到elasticsearch中

目录 1. ik分词器的作用(效果) (1)标准分析器效果 (2)ik_smart分词 (3)ik_max_word分词 2. 首先根据自己的elasticsearch的版本下载对应的ik分词器版本 3. 将下载好的ik分词器…

实景视频与模型叠加融合?

[视频GIS系列]无人机视频与与实景模型进行实时融合_无人机视频融合-CSDN博客文章浏览阅读1.5k次,点赞28次,收藏14次。将无人机视频与实景模型进行实时融合是一个涉及多个技术领域的复杂过程,主要包括无人机视频采集、实景模型构建、视频与模型…

【解决】k8s使用kubeadm初始化集群失败问题整理

执行提示命令,查看报错信息 journalctl -xeu kubelet1、错误:running with swap on is no 报错 "command failed" err"failed to run Kubelet: running with swap on is no 解决: swap未禁用,需要禁用swap&…

aws(学习笔记第十七课) SQS Amazon Simple Queue Service服务

aws(学习笔记第十七课) SQS Amazon Simple Queue Service服务 学习内容: 使用SQS Amazon Simple Queue Service服务整体代码(nodejs的通常工程)代码动作 1. 使用SQS Amazon Simple Queue Service服务 利用应用程序来学习SQS 创建S3$ aws s…

qt-C++笔记之父类窗口、父类控件、对象树的关系

qt-C笔记之父类窗口、父类控件、对象树的关系 code review! 参考笔记 1.qt-C笔记之父类窗口、父类控件、对象树的关系 2.qt-C笔记之继承自 QWidget和继承自QObject 并通过 getWidget() 显示窗口或控件时的区别和原理 3.qt-C笔记之自定义类继承自 QObject 与 QWidget 及开发方式…

VMware ubuntu12.04怎么设置静态IP联网

记得刚开始学习嵌入式就是从ubuntu12.04的环境开始学习的C语言,当时没有弄清楚怎么设置静态IP联网,现在写一篇文章。 1.首先,关闭ubuntu的网络; 2.电脑使用的是wifi,将VMware桥接到该网卡上; 3.在虚拟机设置里面选择桥…

计算机视觉中的图像滤波与增强算法

摘要: 本文深入探讨了计算机视觉领域中的图像滤波与增强算法。首先介绍了图像滤波与增强的基本概念和重要性,随后详细阐述了线性滤波算法中的均值滤波和高斯滤波,以及非线性滤波算法中的中值滤波和双边滤波,包括它们的原理、数学模…

AI大模型学习笔记|神经网络与注意力机制(逐行解读)

来源分享链接:通过网盘分享的文件:详解神经网络是如何训练的 链接: https://pan.baidu.com/s/12EF7y0vJfH5x6X-0QEVezg 提取码: k924 内容摘要:本文深入探讨了神经网络与注意力机制的基础,以及神经网络参数训练的过程。以鸢尾花数…

腾讯云系统盘扩容

在腾讯云申请空间后,只要执行三行命令 云硬盘 在线扩展系统盘分区及文件系统-操作指南-文档中心-腾讯云 安装工具 yum install -y cloud-utils-growpart 给/eav/vda1扩分区 LC_ALLen_US.UTF-8 growpart /dev/vda 1 挂载扩容 ext4 文件系统 resize2fs /dev/vda1 …