【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>
相关推荐
三佛科技-187366133971 天前
分享机械键盘MCU解决方案
单片机·嵌入式硬件·计算机外设
TESmart碲视1 天前
Mac 真正多显示器支持:TESmart USB-C KVM(搭载 DisplayLink 技术)如何实现
macos·计算机外设·电脑
error:(1 天前
蓝牙鼠标频繁卡顿?一招解决 Win10/11 的 USB 省电机制干扰问题
计算机外设
桃杬2 天前
lvgl修改输入设备驱动使其支持鼠标右键、双击、滑轮...
计算机外设
绀目澄清3 天前
unity UGUI 鼠标画线
unity·计算机外设·游戏引擎
沙尘暴炒饭3 天前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
sukalot4 天前
window显示驱动开发—头戴式和专用显示器
计算机外设
Gz、5 天前
京东京造K2 蓝牙/有线双模键盘键盘快捷键
计算机外设
清风6666666 天前
基于STM32单片机的无线鼠标设计
stm32·单片机·计算机外设·毕业设计·课程设计
feifeigo1236 天前
如何使用CrowPanel ESP32-S3高级HMI显示器来创建一个语音交互聊天机器人
机器人·计算机外设