侧边栏壁纸
博主头像
M酷博主等级

祝君一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 40 篇文章
  • 累计创建 36 个标签
  • 累计收到 240 条评论

目 录CONTENT

文章目录

Vue使用keep-alive后,页面切换时 tooltips 不自动消失

M酷
2021-07-21 / 3 评论 / 7 点赞 / 1,187 阅读 / 646 字 / 正在检测是否收录...

背景

最近项目中遇到了一个问题,就是我在前一个页面,鼠标移入文字显示了 tooltip,然后点击这个文字调整到其他页面,这个 tooltip 不会自动消失。如图:

跳转前

tt01

跳转后

tt02

分析

鉴于之前项目没有遇到过这个问题,仔细回想了一下,发现了问题所在,这个项目使用了 keep-alive 组件,可能是这个引发了此问题。

思路

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

  • 监听路由切换,页面跳转时移除页面上的所有 tooltips;
  • keep-alive 包裹的组件会多2个生命周期,activateddeactivated,我们可以在 deactivated 的时候移除页面所有 tooltips

解决

考虑了一下,系统里有很多页面都用了 ToolTip 组件,给所有页面都加这个逻辑不太现实,所有我们可以考虑直接用第一种方式,在 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))
        }
    }
}

😄😄😄 完美

7
广告 广告

评论区