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

清疚 2022-09-16 11:05 410阅读 0赞

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

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16 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

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 ;
    }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8d5ab2fd806e43018a0704c2f453537a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDAwNTUyMDA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/2f502b6756e045a299f2b4ec1a7d38ed.png