【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>
相关推荐
qq_12498707532 小时前
基于Spring Boot的网上招聘服务系统(源码+论文+部署+安装)
java·spring boot·后端·spring·计算机外设
SomeOtherTime1 天前
计算机硬件相关(AI回答)
计算机外设
wan5555cn5 天前
Windows 11系统鼠标键盘被禁用问题的全面解决方案
windows·笔记·深度学习·计算机外设
无敌最俊朗@8 天前
Qt 按钮点击事件全链路解析:从系统驱动到槽函数
开发语言·qt·计算机外设
ulimate_10 天前
树莓派:微雪显示器7寸触摸屏使用
计算机外设
Saniffer_SH12 天前
【高清视频】CXL 2.0 over Fibre演示和答疑 - 将内存拉到服务器10米之外
运维·服务器·网络·人工智能·驱动开发·计算机外设·硬件工程
pc大老13 天前
iPhone 用户如何通过鼠标提升操作体验?
计算机外设·iphone·鼠标·鼠标连接iphone
理想是做个英雄14 天前
基于AC6351D2做无线键盘
计算机外设·杰理ble,mcu以及蓝牙音频
科技观察14 天前
刘诗雯现身TCL品牌活动,雷鸟34Q9显示器同台竞技
计算机外设