el-tooltip打开新页面返回时未关闭
时间: 2024-10-13 21:07:10 浏览: 24
PyPI 官网下载 | streamlit-custom-tooltip-0.1.0.tar.gz
`el-tooltip` 是 Element UI 中的一个轻量级提示组件,它通常用于提供鼠标悬停时的信息提示。关于你说的问题,如果 `el-tooltip` 弹出的内容链接(比如设置了 `open-type` 属性为 'pop' 或者 'inner',点击后弹出一个新的页面)在用户通过浏览器的历史记录回退操作返回到原来的页面时,Tooltip 没有自动关闭的情况,这可能是由于浏览器的行为或者是你在代码中没有设置合适的回调机制。
当页面刷新或者用户直接按 Back 键时,Vue 的生命周期钩子如 `beforeDestroy` 并不会触发,因此 Tooltip 默认不会感知这种状态变化。解决这个问题的一种常见做法是在链接的 click 事件处理函数中添加一些逻辑,例如:
```javascript
<a href="new-page" @click.prevent="showTooltip = true; $router.push('new-page')">点击跳转</a>
// 在某个 Vue 实例中
data() {
return {
showTooltip: false,
}
},
methods: {
handleOutsideClick(event) {
if (event.target !== this.$refs.tooltip && !this.$refs.tooltip.contains(event.target)) {
this.showTooltip = false;
}
},
mounted() {
document.addEventListener("click", this.handleOutsideClick);
},
beforeDestroy() {
document.removeEventListener("click", this.handleOutsideClick);
}
}
```
这里,我们在点击链接后显示 Tooltip,并在 `handleOutsideClick` 函数中检查点击是否在 Tooltip 内部,如果不是则关闭 Tooltip。同时,在组件卸载前移除监听事件,避免内存泄漏。
阅读全文