【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>
相关推荐
zhslhm2 天前
键盘屏蔽与联网控制小工具
计算机外设·电脑·联网程序管理·键盘屏蔽
x66ccff2 天前
【nvidia】Windows 双 A6000 显卡双显示器驱动更新问题修复
计算机外设
szpc16213 天前
60V单通道高精度线性恒流LED驱动器防60V反接SOD123封装
c语言·开发语言·单片机·嵌入式硬件·计算机外设
Alger_Hamlet3 天前
Mac电脑 鼠标右键助手 像windows的右键菜单
windows·macos·计算机外设
禁默5 天前
CSS基础:鼠标、文本与字体属性详解
前端·css·计算机外设
旧故新长5 天前
多台 Windows 电脑之间共享鼠标和键盘,并支持 剪贴板同步(复制粘贴)
计算机外设
zdlinux6 天前
ubuntu 2204键盘按键映射修改
计算机外设
uuuuu17116448 天前
如何自定义5x5键盘
计算机外设
布朗克1688 天前
macbook电脑如何清理键盘防止误触
macos·计算机外设·电脑·键盘清理·防止误触
云心雨禅8 天前
当一个按键“摆烂”时,需要更换整个键盘吗?
计算机外设