【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>
相关推荐
百锦再5 小时前
详解基于C#开发Windows API的SendMessage方法的鼠标键盘消息发送
windows·c#·计算机外设
Bruce小鬼15 小时前
QT鼠标事件
开发语言·qt·计算机外设
Cici_ovo16 小时前
实现一个BLE HID鼠标
计算机外设
医学影像处理2 天前
tmux旧版本配置鼠标滑动页面| tmux运行时如何让新的配置文件生效
centos·计算机外设·tmux
找藉口是失败者的习惯2 天前
如何选择适合你的显示器:关键指标解析
计算机外设
百锦再4 天前
C#实现在windows上实现指定句柄窗口的指定窗口坐标点击鼠标左键和右键的详细情况
windows·c#·计算机外设
Tony11545 天前
罗技M590鼠标无法连接到无线接收器
计算机外设
机器视觉知识推荐、就业指导5 天前
基于Qt/C++全局键盘和鼠标事件监控工具
c++·qt·计算机外设
Mac新人6 天前
优化Mac的鼠标使用体验超简单方法
macos·计算机外设·mac
Mac新人7 天前
又发现了Mac妙控鼠标的新使用方法
计算机外设