element-ui 被el-tooltip包裹的标题,点击跳转后 回到原页面不消失的处理(弹出后不消失)
图1:图2:bug场景:如上图1所示,标题只展示一行,外层包裹tooltip,鼠标移入展示全部,当点击标题时,新打开一个详情页面。当从详情页面再切换到原列表页面时,tooltip仍然停留,没有消失,只有在页面有其他行为时才消失。测试提出了这个bug,最终我找到一个解决方法解决elementui el-tooltip,在弹框之后再次出现的问题参考这个方法成功解决了问题代码如下:1.新建clearTa
·
图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>
更多推荐
已为社区贡献4条内容
所有评论(0)