原理就是在鼠标浮动到el-tootip包裹的元素时判断该元素的scrollWidth（元素内容的实际宽度）有没有超过clientWidth（元素的可是宽度）超出时显示省略号并设置disabled属性为false否则为true代码如下：
<el-tooltip placement="top" :content="title" :disabled="isShowTooltip">
<span @mouseenter="visibilityChange($event)">{{title}}</span>
</el-tooltip>
data () {
return {
isShowTooltip: false
}
},
methods: {
visibilityChange (event) {
const ev = event.target
const evWeight = ev.scrollWidth
const contentWeight = ev.clientWidth
if (evWeight > contentWeight) {
// 实际宽度 > 可视宽度 文字溢出
this.isShowTooltip = false
} else {
// 否则为不溢出
this.isShowTooltip = true
}
}
}
但是由于项目中用到el-tootip的地方太多了所以为了不想写太多次也可以把这部分注册成全局指令：
Vue.directive('is-tip', {
bind (el, bind, vnode, oldnode) {
el.addEventListener('mouseenter', () => {
if (vnode.child.$el.scrollWidth > vnode.child.$el.clientWidth) {
vnode.child.disabled = false
} else {
vnode.child.disabled = true
}
})
}
})
注册完指令之后组件中需要用到的地方就直接嵌套el-tootip加上v-tip就可以了就不需要在每个组件里写重复的代码了
<el-tooltip v-tip placement="top" :content="title">
<span>{{title}}</span>
</el-tooltip>
