vue 组件封装 | 随鼠标移动的信息框 （含监听鼠标移动、移出事件，获取元素的宽高、获取浏览器的宽高）

目录

 s-mousetip.vue

使用方法

---

 s-mousetip.vue

<template>
    <div ref="mouseTip" class="mouseTipClass" :style="mouseTipStyle">
        <slot></slot>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                mouseTipStyle: {}
            }
        },
        mounted() {
            // 监听鼠标在浏览器可见区域中移动
            window.addEventListener('mousemove', this.mousemove)
            // 监听鼠标移出浏览器可见区域
            window.addEventListener('mouseout', this.mouseout)
        },
        methods: {
            mouseout() {
                this.$set(this.mouseTipStyle, 'display', 'none')
            },
            mousemove(e) {
                this.$set(this.mouseTipStyle, 'display', 'block')
                // 获取信息框的宽度
                let mouseTipWidth = window.getComputedStyle(this.$refs.mouseTip).width
                // 获取信息框的高度
                let mouseTipHeight = window.getComputedStyle(this.$refs.mouseTip).height
                // 当鼠标上方容不下信息框时，信息框改在鼠标下方显示
                if (e.clientY < Number(mouseTipHeight.replace('px', '')) + 20) {
                    this.$set(this.mouseTipStyle, 'top', e.clientY + 20 + 'px')
                } else {
                    this.$set(this.mouseTipStyle, 'top', e.clientY - 36 + 'px')
                }
                // 当鼠标右侧容不下信息框时，信息框改在鼠标左边显示
                if (e.clientX > document.documentElement.clientWidth - Number(mouseTipWidth.replace('px', ''))) {
                    this.$set(this.mouseTipStyle, 'left', e.clientX - Number(mouseTipWidth.replace('px', '')) + 'px')
                } else {
                    this.$set(this.mouseTipStyle, 'left', e.clientX + 'px')
                }
            },
        }
    }
</script>
<style scoped>
    .mouseTipClass {
        display: none;
        position: fixed;
        z-index: 9999;
        background: white;
        border: 1px solid gray;
        padding: 4px;
        border-radius: 4px;
    }
</style>

使用方法

 在  s-mousetip 标签中，输入任何想随鼠标移动的内容即可（因是通过插槽实现，可以是文字、图片、组件等任意内容）

<template>
    <s-mousetip>我是随鼠标移动的信息框</s-mousetip>
</template>