图1:
在这里插入图片描述

图2:
在这里插入图片描述

bug场景:
如上图1所示,标题只展示一行,外层包裹tooltip,鼠标移入展示全部,当点击标题时,新打开一个详情页面。当从详情页面再切换到原列表页面时,tooltip仍然停留,没有消失,只有在页面有其他行为时才消失。
测试提出了这个bug,最终我找到一个解决方法
解决elementui el-tooltip,在弹框之后再次出现的问题

参考这个方法成功解决了问题

代码如下:
1.新建clearTabIndex.js

const vueClearIndex = {}
/*
* 解决tooltips,在弹框之后再次出现的问题,原因是由于tabindex导致
*/
vueClearIndex.install = Vue => {
  Vue.directive('delTabIndex', {
    bind(el, binding) { // el为绑定的元素,binding为绑定给指令的对象
      el.__vueSetTimeoutIndex__ = setTimeout(() => {
        // 清除当前tabIndex
        el.removeAttribute('tabindex')
        clearTimeout(el.__vueSetTimeoutIndex__)
      }, 0)

    },
    unbind(el) {
      clearTimeout(el.__vueSetTimeoutIndex__)
    }
  })
}

export default vueClearIndex

2.在main.js中添加全局指令

import clearTabIndex from '@/directive/clearTabIndex.js' // 删除el-tooltip tabindex
clearTabIndex.install(Vue)

3.在页面中直接使用

<el-tooltip v-delTabIndex ...>
    <div class="one_line_ellipsis title" @click="goMaterialDetail(item.ip_id)">{{item.name}}</div>
</el-tooltip>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐