一、 问题复现

跳转前:

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

二、分析

由于在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)
  }
})

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

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐