Element系列之 keep-alive 中使用 show-overflow-tooltip 切换路由 tooltip 不消失的解决办法

---

一、背景

不管是在移动端还是 pc 端，都有一些需要缓存数据的场景。

比如，在一个数据展示页，这是一个 el-table，当用户点击某一行会进入这个条目的详情。当用户返回展示页的时候，我们希望能帮助用户留住之前的诸如：筛选条件、跳转页数 等数据。

vue 的 keep-alive 可以帮我们做这个事情。

现在，这个 el-table 中有些数据很长。

比如一段携带参数的 url ：https://www.baidu.com/link?url=tsptvz-cU2m2HFPFwje315C6Y8BLh0nPi5xD8t-RL5S&wd=&eqid=d4c41bfd00026e520000000360af7907

那我们想要这个 url 在 el-table 里完全展示出来是不现实的。

所以 ElementUI 提供了 show-overflow-tooltip 这样一个属性，当表格中内容过长被隐藏时显示 tooltip。

然而

同时使用 keep-alive 和 show-overflow-tooltip 就会出现下面的问题：

二、分析

show-overflow-tooltip 实际会生成一个 tooltip 提示框，加载到 body 下。

当组件被销毁时，其 display 属性被赋值为 none，从而实现隐藏效果。

当我们代码中使用 keep-alive 将组件保存起来，即便路由已经跳转，但组件不会销毁，tooltip 提示框则不会自动隐藏，未获取到位置，就定位到左上角

三、解决方案

直接使用 js 将这个恼人的 tooltip 隐藏掉。

包裹在 keep-alive 组件中的的组件在被切换时会调用 activated、deactivated 两个生命周期的钩子方法。

其中 activated 是缓存组件激活时调用的，而 deactivated 是路由跳转到其他组件时调用的

所以，代码可以这样写

deactivated() {
	const nodeList = document.querySelectorAll(".el-tooltip__popper");
	for (var i = 0; i < nodeList.length; i++) {
		nodeList[i].style.display = "none";
	}
}
1
2
3
4
5
6

这段代码的意思是，在路由即将离开的时候，查找所有的 el-tooltip__popper 并将其 display 属性设置为 none。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！