解决iview-ui的tooltip在使用keep-alive时，页面跳转后提示框不消失的问题

啊儿法

已于 2024-08-19 14:25:13 修改

阅读量461

点赞数 5

文章标签： view design 前端 vue vue.js iview

于 2024-08-16 14:55:15 首次发布

本文链接：https://blog.csdn.net/qq_44814187/article/details/141259881

版权

问题：

从A页面点击图标，图标tooltips的content为“查看详情”，跳转到页面B，再回到页面A，tooltips没有隐藏，不影响使用和其他tooltips的显示功能，但是有bug

原因：

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，A页面跳转时，页面实例会被缓存，所以才会导致tooltip的这个问题

解决方法：

思路：跳转前手动将tooltips的元素的display属性设置为none
代码：
- methods中的代码，获取tooltips元素并将display属性设置为none

checkDetail () {
  const divset = document.getElementsByClassName('check_detail')
  for (let i = 0; i < divset.length; i++) {
    divset[i].style.display = 'none'
  }
},

使用了Tooltips的页面元素

 <Tooltip
  content="查看詳情"
  placement="top"
  transfer-class-name="check_detail"
>
  <router-link
    class="table-btn"
    :to="{
      name: 'B',
      query: {
        info: 'testTooltips'
      }
    }"
  >
    <img
      src="项目图标"
      alt=""
      @click="checkDetail"
    />
  </router-link>
</Tooltip>