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

简介: 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>
目录
相关文章
|
1月前
|
Web App开发 API Windows
取接口访问者信息[IP,浏览器,操作系统]免费API接口教程
此API用于获取访问者的IP地址、浏览器和操作系统信息,支持70多种浏览器和操作系统。通过POST或GET请求至`https://cn.apihz.cn/api/ip/getapi.php`,需提供用户ID和KEY。返回结果包括状态码、消息、IP、浏览器和操作系统信息。示例:{&quot;code&quot;:200,&quot;ip&quot;:&quot;175.154.88.178&quot;,&quot;browser&quot;:&quot;Chrome&quot;,&quot;os&quot;:&quot;Windows 10&quot;}。详情见官网文档。
|
2月前
|
JavaScript 前端开发
|
2月前
|
JSON JavaScript 前端开发
vue如何更好的解决浏览器兼容问题
vue如何更好的解决浏览器兼容问题
53 1
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
153 0
|
4月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
138 1
|
4月前
|
JavaScript 前端开发
如何让div的宽高始终等于浏览器宽高的一半
如何让div的宽高始终等于浏览器宽高的一半
35 2
|
4月前
|
存储 JavaScript 程序员
Vue学习之---浏览器本地存储(8/17)
这篇文章介绍了Vue中浏览器本地存储的使用方法,包括基础知识、localStorage和sessionStorage的代码实例及其测试效果,并提供了相关的API和操作示例。
Vue学习之---浏览器本地存储(8/17)
|
4月前
|
Web App开发
成功解决Chrome浏览器 控制台下看不到接口信息的问题
这篇文章提供了解决Chrome浏览器控制台不显示接口信息问题的方法,包括检查过滤设置和确保“保留日志”开关已打开。
成功解决Chrome浏览器 控制台下看不到接口信息的问题
|
4月前
|
Web App开发 JavaScript 前端开发
如何在浏览器中安装使用Vue开发者工具?Vue开发者工具的安装使用?可直接提取插件安装使用
这篇文章介绍了如何在浏览器中安装和使用Vue开发者工具,提供了两种下载方式,包括直接下载编译好的插件和从GitHub上下载源代码后进行打包。文章还详细说明了在Chrome浏览器中加载插件的步骤,以及插件在Vue项目和非Vue项目中的不同表现。
如何在浏览器中安装使用Vue开发者工具?Vue开发者工具的安装使用?可直接提取插件安装使用
|
4月前
|
存储 JavaScript
纯Vue实现网页日常任务清单小功能(数据存储在浏览器)
这篇文章介绍了如何使用纯Vue实现一个网页日常任务清单的小功能,数据存储在浏览器中以保持数据持久化。文章内容包括功能描述、效果演示、核心代码修改方法,以及已经打包好的项目源码下载链接。作者还提供了友情提示,指出了数据存储到浏览器的核心代码部分,方便读者快速理解和应用。