Vue使用keep-alive后，el-tooltip悬浮内容在切换页面时不自动消失

比如在列表页面有个编号，编号过长时鼠标放上去会显示el-tooltip提示内容，当点击这个编号进入详情页面时，此提示内容不消失

 

 

通过分析，发现使用 keep-alive 后，页面切换时上一个页面的实例被缓存了，跳转的时候并没有销毁，所以才会残留 tooltips，所以有以下解决思路:

方法一：

页面离开组件时执行一个方法deactivated（），将页面上的tooltips隐藏掉，在每个页面的.vue文件里写以下代码。

// 离开组件时执行
  deactivated() {
    const myNodeList = document.querySelectorAll('.el-tooltip__popper')
    forEach(myNodeList, function(index, value) {
      value.style.display = 'none'
    }, null)
  },

问题得到解决。

方法二：App.vue里全局改

但系统里很多页面都用到了tooltips，给所有的.vue文件里面都加这个代码太麻烦了。

那么直接在App.vue里监听路由切换事件，路由切换时移除即可。

watch: {
    // keep-alive模式下，页面跳转前要手动移除残留的tooltip
    $route() {
        const allTooltips = document.querySelectorAll('.el-tooltip__popper')
        if (allTooltips.length) {
            Array.from(allTooltips).map((node) => document.body.removeChild(node))
        }
    }
}

方法三：permmision.js里全局改

vue-element-admin中，permission主要负责全局路由守卫和登录判断。

router.afterEach是vue全局的导航钩子函数，即进入某个路由之后触发的钩子函数。

在permmision.js里加如下代码：

router.afterEach(() => {
  const mypopoverList = document.querySelectorAll('.el-popover') // 获取页面所有popover的dom集合
  const mytooltipList = document.querySelectorAll('.el-tooltip__popper') // 获取页面所有tooltip的dom集合
  // 分别遍历让所有的悬浮框隐藏
  setTimeout(() => {
    mypopoverList.forEach((value) => {
      value.style.display = 'none'
    })
    mytooltipList.forEach((value) => {
      value.style.display = 'none'
    })
  }, 1000)
 
  NProgress.done() // 关闭进度条
})

欢迎大家提出宝贵意见！