vue中在使用keep-alive时,会出现在页面跳转后el-tooltip或el-dropdown不消失的问题以及解决方法

news2024/10/7 8:29:56

一、 问题复现

跳转前:

在这里插入图片描述
在这里插入图片描述
跳转后:
在这里插入图片描述
在这里插入图片描述

二、分析

由于在vue中使用了keep-alive,页面在切换时,上一个页面的实例被缓存了,跳转后并没有销毁,所以才会残留 tooltip或dropdown,所以有以下解决思路:
1、keep-alive会多出两个生命周期,我们可以在deactivated中销毁当前页面中所有的tooltip或dropdown;
2、在路由守卫中,在页面跳转时都会执行这里的代码,然后移除即可;
3、在App.vue中,监听路由切换事件,然后移除即可。

其中2、3比较好,可以只写一处代码,就可实现整个项目都能移除el-tooltip或el-dropdown的功能。

三、解决

以路由守卫为例:

router.beforeEach((to, from, next) => {
  try {
    let tooltipList = document.getElementsByClassName('el-tooltip__popper')
    for (let tip in tooltipList) {
      let tipItem = tooltipList[tip]
      if (typeof tipItem == 'object') {
        tipItem.style.display = 'none'
      }
    }
  } catch (error) {
    console.log('error--tooltip', error)
  }
  try {
   const allTooltips = document.querySelectorAll('.el-tooltip__popper')
   if (allTooltips.length) {
   	Array.from(allTooltips).map((node) => document.body.removeChild(node))
   }
  } catch (error) {
    console.log('error--dropdown', error)
  }
})

写法上有多种,还有更多在这就不写了,希望对你有帮助

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[C++] C++入门第一篇 -- 命名空间,输入输出,缺省函数,函数重载底层原理

目录 1、关键字 2、命名空间 2.1 命名空间的定义 2.2 命名空间的使用方式 2.2.1 加命名空间名称及作用域限定符 2.2.2 使用using将命名空间中某个成员引入 2.2.3 使用using namespace 命名空间名称引入 3、C输入与输出 4、缺省参数 4.1 缺省参数的概念 4.2 缺省参数…

Blazor前后端框架Known-V1.2.7

V1.2.7 Known是基于C#和Blazor开发的前后端分离快速开发框架,开箱即用,跨平台,一处代码,多处运行。 Gitee: https://gitee.com/known/KnownGithub:https://github.com/known/Known 概述 基于C#和Blazor…

预科C语言

1.day10 1、perror() 原型:void perror(const char *s); 根据errno呈现错误信息 perror("malloc error"); malloc error: Cannot allocate memory 2、多文件编译 .c ---预处理(.i -E)---汇编(.s -S&#xf…

threeJs着色器ShaderMaterial以及统一着色语言GLSL语法基本介绍

一、着色器材质ShaderMaterial的基本使用 废话不多讲先来看案例 console.log(着色器入门)// 引入three.js import * as THREE from three // 引入OrbitControls控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 初始化场景 const scene n…

git 提交换行符问题:LF would be replaced by CRLF

提交git 记录时,遇到问题 fatal: LF would be replaced by CRLF 原因: 是因为git换行符的导致Unix/Linux使用的是LF,Mac后期也采用了LF,但Windows一直使用CRLF 解决方案:禁止转换文件格式,其次允许提交换行符的文件 …

钉钉返回:访问ip不在白名单之中,请参考FAQ

新版钉钉 在开发管理-服务器出口IP-配置返回错误信息返回给你的requestIp

“国产大会”,世界人工智能大会有何影响力?

之前我们讲过,这个世界人工智能大会是我们中国人自己创办的世界级的大会,是全球范围内的人工智能领域盛会,它对人工智能的发展和应用有着超重要的影响力!首先,它吸引全球各个领域的专家、学者、企业家和政府官员关注和…

Windows上安装PostgreSQL

下载地址:PostgreSQL下载网址 因为某些问题我自己安装的是postgresql-11.2-1-windows-x64 根据下图顺序安装即可,不同版本可能顺序有点区别但每部分目的都是一样的。 首先右键以管理员身份运行,可以弹出安装界面

在 3ds Max 和 After Effects 中创建逼真的蜘蛛网模型

推荐: NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. 创建蜘蛛网 步骤 1 打开 3ds Max。 打开 3ds Max 步骤 2 转到创建>标准基元>平面并创建一个平面 在前视图中。 创建平面 步骤 3 保持其长度和宽度 segs 为 80。 段 步骤 4 打开修改器列表…

算法leetcode|64. 最小路径和(rust重拳出击)

文章目录 64. 最小路径和:样例 1:样例 2:提示: 分析:题解:rust:go:c:python:java: 64. 最小路径和: 给定一个包含非负整数的 m x n 网…

32 QFile文件读写

案例:使用LineEdit和TextEdit实现读取文件并显示文件内容 展示: 代码: #include "widget.h" #include "ui_widget.h" #include "QFileDialog" #include "QMessageBox" #include "QFile" …

2、nacos 2.1.0注册中心原理及源码分析

一、为什么有这课程 Spring Cloud Alibaba 新版本中Seata 1.5.2和Nacos 2.1.0 在性能和使用方面都有很大提升,这节课将从使用和源码的角度详细讲解这两个框架。 二、设计注册中心 1、分布式框架的注意点:三高架构 高可用 高可用性(High Av…

智慧园区智能照明控制系统解决方案

1、概述 园区照明比较复杂,办公建筑、生产车间和园区道路、景观照明等类型比较多,而且对照明控制方式要求不一样。所以合理使用照明控制系统,针对不同建筑不同场景使用不同的控制策略,大程度使用自然光照明达到节省照明用电&#…

科技资讯|苹果开放Vision Pro头显开发套件申请,此前曝光三款电池

苹果今天宣布面向开发人员,正式接受 Vision Pro 头显开发套件申请,从而帮助其开发和测试应用程序。 苹果官方页面介绍,开发人员在获得 Vision Pro 头显开发套件之外,还可以获得设备设置和入门方面的帮助,与 Apple 专…

谷粒商城篇章5 ---- P173-P192 ---- 检索服务【分布式高级篇二】

目录 1 检索服务 1.1 搭建页面环境 1.1.1 引入依赖 1.1.2 将检索页面放到gulimall-search的src/main/resources/templates/目录下 1.1.3 调整搜索页面 1.1.4 将静态资源放到linux的nginx相关映射目录下/root/docker/nginx/html/static/ search/ 1.1.5 SwitchHosts配置域…

F5产品队列再添“猛将”,稳健守护云原生基础设施

提到F5产品队列,无论是负载均衡,还是独立部署且一次性购买的硬件产品,或者是F5 分布式云服务组合产品,都体现出F5的能力与能量。前不久,F5宣布推出云工作负载防护解决方案——F5 分布式云应用基础设施防护(…

Python基础语法第六章之字典

一、字典 1.1字典是什么 字典是一种存储 键值对 的结构. 啥是键值对? 这是计算机/生活中一个非常广泛使用的概念. 把 键(key) 和 值(value) 进行一个一对一的映射, 然后就可以根据键, 快速找到值. 1.2创建字典 创建一个空的字典. 使用 { } 表示字典. a { } b dict() pr…

Win10从安全模式命令行退出安全模式正常启动

前两天听信他人的一则妖言,将windows设置为安全模式卸载软件,结果初始帐户密码忘记,登陆不了了,琢磨半天才正常启动用pin登录了系统。 微软可以使用本地帐户或在线帐户管理计算机,在线帐户的好处就是可以云同步密钥 设…

uniapp 微信小程序 预览pdf方法

效果图: 1、在小程序中 // #ifdef MP */ 是区分运行的环境,在小程序中可使用如下方法uni.downloadFile({url: item.link,//文件地址success: function (res) {var filePath res.tempFilePath;uni.openDocument({filePath: filePath,showMenu: false…

Hadoop学习日记-MapReduce思想及执行流程

MapReduce思想 Map负责“拆分”:即将复杂问题拆分成可以并行计算的小问题,彼此之间几乎没有依赖联系。 Reduce负责对Map阶段的结果进行合并汇总 Map和Reduce的抽象接口如下: map:(k1; v1) — (k2; v2) reduce:(k2; [v2]) — (k3; v3) 一…