base-ui/src/directive/tooltip/tooltip.js

A component library for Better Vue developmemt

/**
 * @author lany44
 * @date 2018/3/26-下午4:51
 * @file tooltip.js
 */
import {isTrueType} from '../../util/check';

import {initPosition} from './position';

let toolTipEle;

export default {
    bind() {
        if (!toolTipEle) {
            toolTipEle = document.createElement('span');

            toolTipEle.classList.add('b-tooltip');

            toolTipEle.addEventListener('mouseover', () => {
                Object.assign(toolTipEle.style, {
                    display: 'block'
                });
            });

            toolTipEle.addEventListener('mouseout', () => {
                Object.assign(toolTipEle.style, {
                    display: 'none'
                });
            });

            document.body.appendChild(toolTipEle);
        }
    },

    inserted(el, {value, arg = true}) {
        if (!arg) return;
        const {text, position} = typeof value == 'string' ? {text: value, position: 'top-center'} : value;

        el.dataset.tipText = text;
        el.dataset.tipPosition = position;
        el.$$tooltipMouseover = (event) => {
            event.stopPropagation();
            const ellipsisShow = isTrueType(el.dataset.ellipsisShow);
            const {clientWidth, scrollWidth} = el;
            const isShow = scrollWidth > clientWidth; // 隐藏了
            if (ellipsisShow && !isShow) return;
            toolTipEle.innerText = el.dataset.tipText;
            toolTipEle.setAttribute('b-tip-position', el.dataset.tipPosition);

            Object.assign(toolTipEle.style, {
                display: 'block'
            });
            initPosition({
                $refEl: el,
                $el: toolTipEle,
                place: el.dataset.tipPosition
            });
        };

        el.$$tooltipMouseout = (event) => {
            event.stopPropagation();
            Object.assign(toolTipEle.style, {
                display: 'none'
            });
        };
        el.$$click = (event) => {
            const raf = fn => setTimeout(fn, 100);
            raf(() => {
                const isEleInBody = document.body.contains(el);
                if (!isEleInBody) {
                    el.$$tooltipMouseout(event);
                }
            });
        };

        el.addEventListener('mouseover', el.$$tooltipMouseover);
        el.addEventListener('mouseout', el.$$tooltipMouseout);
        el.addEventListener('click', el.$$click);
    },

    update(el, {value, arg = true, modifiers: {ellipsisShow = false}}) {
        if (!arg) return;
        const {text, position} = typeof value == 'string' ? {text: value, position: 'top-center'} : value;
        el.dataset.tipText = text;
        el.dataset.tipPosition = position;
        el.dataset.ellipsisShow = ellipsisShow;
    },

    unbind(el) {
        if (toolTipEle.style.display === 'block') {
            Object.assign(toolTipEle.style, {
                display: 'none'
            });
        }
        el.removeEventListener('mouseover', el.$$tooltipMouseover);
        el.removeEventListener('mouseout', el.$$tooltipMouseout);
        el.removeEventListener('click', el.$$click);
    }
};