vue中轻松搞掂鼠标气泡框提示框tip跟随

 

 

<template>
    <div>
        <!-- 提示框 -->
        <sg-tip :show="isShowTip">{{tipContent}}</sg-tip>
        <!-- 移入某个元素触发显示跟随提示框显示-->
        <div class="red" @mouseover="showTip($event.target.innerText)" @mouseout="hideTip">
            <p>The current baseline outlook for suggests</p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isShowTip: false,
                tipContent: ""
            };
        },
        mounted() {
            this.mouseFllow();
        },
        methods: {
            showTip(text = "") {
                this.tipContent = text;
                this.isShowTip = true;
            },
            hideTip() {
                this.isShowTip = false;
            },
            mouseFllow() {
                // 鼠标跟随tip
                var sgTip = document.querySelector("sg-tip");
                document.onmousemove = function (e) {
                    var x = e.pageX,
                        y = e.pageY,
                        offset = 20;
                    sgTip.style.left = x + offset + "px";
                    sgTip.style.top = y + offset + "px";
                };
            }
        }
    };
</script>