【VUE】封装一个追随鼠标的漂浮组件框架

红色箭头代表鼠标位置,蓝色区域跟随鼠标出现,鼠标进行其他操作的时候,蓝色区域隐藏。

vue全码

复制代码
<template>
  <div
    @mousemove="updatePosition"
    @mouseleave="hideDiv"
    class="container"
    :style="{ position: 'relative' }"
  >
    <div
      v-if="showDiv"
      :style="{
        position: 'absolute',
        top: `${yPosition}px`,
        left: `${xPosition}px`,
        width: '100px',
        height: '100px',
        backgroundColor: 'lightblue'
      }"
    >1111111111
      <!-- 这里是你想要显示的内容 -->
    </div>
    <!-- 这里是页面的其他内容 -->
  </div>
</template>

<script>
export default {
  name: "SelectMenu",
  data() {
    return {
      xPosition: 0,
      yPosition: 0,
      showDiv: false
    };
  },
  methods: {
    updatePosition(event) {
      this.xPosition = event.clientX;
      this.yPosition = event.clientY;
      this.showDiv = true;
    },
    hideDiv() {
      this.showDiv = false;
    }
  }
}
</script>

<style scoped>
.container {
  height: 500px; /* 可以根据需要调整高度 */
}
</style>
相关推荐
chao1898446 小时前
C#模拟鼠标键盘操作的多种实现方案
开发语言·c#·计算机外设
林恒smileZAZ1 天前
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
前端·计算机外设·css3
福大大架构师每日一题3 天前
rustdesk 1.4.3 发布:新增虚拟鼠标、Wayland 多显示器支持等功能
计算机外设·rustdesk
梓默3 天前
鼠标偶尔卡顿解决方法
计算机外设
Jwest20213 天前
工业显示器在矿用挖掘机中的应用
计算机外设
lzhdim3 天前
雷蛇(Razer)炼狱蝰蛇V2X极速版无线鼠标开箱
单片机·嵌入式硬件·计算机外设
晋人在秦 老K5 天前
鼠标连点效率低?MouseClickTool 2.0三步配置,自动化操作提速80% 重复点击太耗时?Windows鼠标连点器实操教程,开发测试效率翻倍
windows·自动化·计算机外设·鼠标连点器·gui模拟点击·自动化点击解决方案
jbk33115 天前
监听指定事件然后触发鼠标点击操作等,智能文本识别按键工具的使用教程
计算机外设
安卓开发者6 天前
鸿蒙NEXT鼠标光标开发完全指南
华为·计算机外设·harmonyos
雨中风华6 天前
Windows 平台 HOOK DWM 桌面管理程序,实现输出变形的桌面图像到显示器
windows·计算机外设