【el-tooltips改造】Vue实现文本溢出才显示el-tooltip，否则不显示el-tooltips

本文主要是介绍【el-tooltips改造】Vue实现文本溢出才显示el-tooltip，否则不显示el-tooltips，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现原理：

使用disabled属性控制el-tooltip的content显示与隐藏；

目标：

1行省略、多行省略、可缩放页面内的文本省略都有效。

实现方式：

1、自定义全局指令，tooltipAutoShow.js代码如下（参考的el-table中的内容超出才显示tooltips的逻辑）：

/**
* tooltip-auto-show tooltip不超长则不显示
*/
import Vue from 'vue'
import { getStyle } from 'element-ui/src/utils/dom'
export default {inserted(el, binding, vnode) {el.__vueOverflowTooltipMouseenter__ = function(e) {const defalutSilent = !!Vue.config.silentVue.config.silent = truevnode.componentInstance.disabled = trueconst range = document.createRange()range.setStart(el, 0)range.setEnd(el, el.childNodes.length)const rangeWidth = Math.round(range.getBoundingClientRect().width)const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0)let elWidth = el.offsetWidth// 兼容getBoundingClientRect().width值受scale缩放影响if (el.offsetWidth < Math.round(el.getBoundingClientRect().width)) {elWidth = Math.round(el.getBoundingClientRect().width)}// 1行省略if (rangeWidth + padding > elWidth || el.scrollWidth > elWidth) {vnode.componentInstance.disabled = false}// 处理多行省略if (getStyle(el, '-webkit-line-clamp') > 1 && el.scrollHeight > el.offsetHeight) {vnode.componentInstance.disabled = false}Vue.config.silent = defalutSilent}el.addEventListener('mouseenter', el.__vueOverflowTooltipMouseenter__)},unbind: function(el) {el.removeEventListener('mouseenter', el.__vueOverflowTooltipMouseenter__)delete el.__vueOverflowTooltipMouseenter__}
}

import tooltipAutoShow from './module/tooltipAutoShow'Vue.directive('tooltip-auto-show', tooltipAutoShow)

2、使用方式：

<el-tooltip v-tooltip-auto-show class="" effect="dark" :content="data.name" placement="top-start"><div>{{ data.name }}</div>
</el-tooltip>

3、实现效果：

这篇关于【el-tooltips改造】Vue实现文本溢出才显示el-tooltip，否则不显示el-tooltips的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---