vue 无延迟悬浮tip小组件

1666160438140.gif

<template>
    <span class="hover-tip-container" @mouseenter="onMouseEnter" @mousemove="onMouseMove" @mouseleave="onMouseLeave">
        <slot></slot>
    </span>
</template>
<script>
export default {
    props: {
        text: ""
    },
    data() {
        return { tipDom: document.createElement("div") }
    },
    mounted() {
        this.tipDom.style.position = 'fixed'
        this.tipDom.style.background = "#fff"
        this.tipDom.style.fontSize = "12px"
        this.tipDom.style.padding = '0 5px 1px 7px'
        this.tipDom.style.pointerEvents = "none"
        this.tipDom.style.fontWeight = "bolder"
        this.tipDom.style.borderRadius = '3px'
        this.tipDom.style.border = "1px solid #999"
    },
    methods: {
        onMouseEnter(e) {
            this.tipDom.innerText = this.text;
            document.body.appendChild(this.tipDom);
        },
        onMouseMove(e) {
            this.tipDom.style.left = `${e.clientX + 20}px`
            this.tipDom.style.top = `${e.clientY}px`
        },
        onMouseLeave() {
            document.body.removeChild(this.tipDom)
        }
    }
}
</script>
<style scoped lang="scss">
.hover-tip-container {
    display: inline-block;
}
</style>