解决elementui el-tooltip,在弹框之后再次出现的问题
elementui el-tooltip有个bug就就是当有模态确认框的时候,el-tooltip会再次出现,经过一系列问题的排查,是由于tooltip会默认给dom元素一个tabindex属性,当弹框结束之后,tabindex会自动选中,导致再次出现的问题。点击删除按钮后弹窗,点击取消 按钮页面仍有“删除”悬浮框创建clearTabIndex.jsconst vueClearIndex = {}
·
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 ;
}
更多推荐
已为社区贡献6条内容
所有评论(0)