怎么做链接网站,土建网招聘信息,青岛建网站选青岛博采网络,国内品牌营销成功案例实现原理#xff1a; 使用disabled属性控制el-tooltip的content显示与隐藏#xff1b; 目标#xff1a; 1行省略、多行省略、可缩放页面内的文本省略都有效。 实现方式#xff1a;
1、自定义全局指令#xff0c;tooltipAutoShow.js代码如下#xff08;参考的el-table中的…实现原理 使用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/tooltipAutoShowVue.directive(tooltip-auto-show, tooltipAutoShow)
2、使用方式
el-tooltip v-tooltip-auto-show class effectdark :contentdata.name placementtop-startdiv{{ data.name }}/div
/el-tooltip
3、实现效果
