magiccube-vue3/package/directives/tooltip/index.js

vue3-js版组件库

const TOOLTIP_CLASS_NAME = 'mc-tooltip'

function onMouseIn(el, value, event){
    if(!value) return false
    const winWidth = document.body.clientWidth
    const winHeight = document.body.clientHeight
    const mouseX = event.clientX - event.offsetX
    const mouseY = event.clientY - event.offsetY
    const tipWidth = event.target.scrollWidth
    const tipHeight = 24
    const marginMouse = 4
    const paddingWidth = 24
    const x = mouseX + tipWidth + paddingWidth > winWidth? winWidth - (tipWidth + paddingWidth) : mouseX
    const y = mouseY + tipHeight + marginMouse > winHeight? winWidth - tipHeight - marginMouse : mouseY + marginMouse + tipHeight
    const div = document.createElement('div')
    div.className = TOOLTIP_CLASS_NAME
    div.innerText = value
    div.style.top = y + 'px'
    div.style.left = x + 'px'
    div.style.minHeight = tipHeight + 'px'
    div.style.paddingLeft = paddingWidth / 2 + 'px'
    div.style.paddingRight = paddingWidth / 2 + 'px'
    div.style.zIndex = 10000
    el.append(div)
}

function onMouseOut(el, event){
    event && event.stopPropagation()
    event && event.preventDefault()
    const list = el.children || []
    for(let i=0;i<list.length;i++){
        const node = list[i]
        if(node.className.toString().indexOf(TOOLTIP_CLASS_NAME) > -1) el.removeChild(node)
    }
}

export default {
    name: 'Tooltip',
    directive: {
        mounted(el, { value }) {
            if(value){
                el.onmouseenter = (e) => onMouseIn(el, value, e)
                el.onmouseleave = (e) => onMouseOut(el, e)
            }
        },
        updated(el, { value }) {
            el.onmouseenter = (e) => value && onMouseIn(el, value, e)
            el.onmouseleave = (e) => value && onMouseOut(el, e)
        },
        unmounted(el) { }
    }
}