Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 7x 8935x 8935x 362x 362x | /** * 给包含`ellipsis`样式并且带有过长文本的元素自动添加`title`提示 */ import { isIE } from '../../utils/dom'; export const ellipsisTitle = { bind(el, { value }) { el.__ellipsisTitleHandler = (e) => { // 如果判断已存在`title`属性而不添加`title`的话,会导致`<u-select>`在某些场景下`value`不变`text`变,而`title`不会更新 const style = window.getComputedStyle(el); let title; if (typeof value === 'boolean') { // value 为 false 时,表示无需 title title = value ? el.innerText : null; } else { title = value === undefined ? el.innerText : value; } if (title && style.overflow === 'hidden' && style.textOverflow === 'ellipsis' && style.whiteSpace === 'nowrap') { if (isIE()) { const height = el.offsetHeight; el.style.whiteSpace = 'normal'; el.style.overflow = 'visible'; el.style.wordBreak = 'break-word'; const newHeight = el.offsetHeight; el.style.whiteSpace = ''; el.style.overflow = ''; el.style.wordBreak = ''; if (newHeight > height) { el.setAttribute('title', title); } } else if (el.scrollWidth > el.offsetWidth) { el.setAttribute('title', title); } } else if (el.getAttribute('title')) { // 不满足配置 title 场景时,删除冗余 title el.removeAttribute('title'); } }; el.addEventListener('mouseenter', el.__ellipsisTitleHandler); }, unbind(el) { el.removeEventListener('mouseenter', el.__ellipsisTitleHandler); delete el.__ellipsisTitleHandler; }, }; |