【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>
相关推荐
剁椒排骨7 小时前
win11什么都不动之后一段时间黑屏桌面无法显示,但鼠标仍可移动,得要熄屏之后才能进入的四种解决方法
运维·windows·经验分享·计算机外设·win11·win10
iFlyCai9 小时前
对Mac文字双击或三击鼠标左键没有任何反应
macos·计算机外设
伊织code10 小时前
BongoCat - 跨平台键盘猫动画工具
计算机外设·动画·键盘·bongocat
m0_738355691 天前
护眼-科学使用显示器
计算机外设
xiaowu0802 天前
C# 使用Windows API实现键盘钩子的类
windows·c#·计算机外设
成工小白2 天前
【Linux】冯诺依曼体系结构及操作系统架构图的具体剖析
linux·计算机外设
transformer_WSZ3 天前
赛睿鼠标设置宏
计算机外设
活跃家族3 天前
UI键盘操作
ui·计算机外设
啊丢_4 天前
配置tmux ctrl+a与鼠标点击切换
计算机外设
是Dream呀5 天前
AI写代码时代,我却被这块28寸方屏显示器圈了粉!
人工智能·计算机外设·明基