All files / src/directives/v-ellipsis-title index.js

20% Statements 5/25
0% Branches 0/20
66.66% Functions 2/3
20% Lines 5/25

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;
    },
};