解决elementui el-tooltip，在弹框之后再次出现的问题

elementui el-tooltip有个bug就就是当有模态确认框的时候，el-tooltip会再次出现，经过一系列问题的排查，是由于tooltip会默认给dom元素一个tabindex属性，当弹框结束之后，tabindex会自动选中，导致再次出现的问题。

点击删除按钮后弹窗，点击取消 按钮页面仍有“删除”悬浮框

 

创建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

 main.js添加全局指令

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

vue直接使用

<el-tooltip v-delTabIndex ...></tooltip>

 样式：每次点击取消掉模态框时，发现给`el-tootip`包裹的元素加了一个类名‘.focusing’,我就在样式表里面加了一个’display:none‘，然后可以了

.focusing{
  display: none ;
}