【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 小时前
Arduino音乐键盘程序
单片机·嵌入式硬件·计算机外设
Jwest20211 天前
工业显示器在地铁电力监控与运维中的应用
运维·计算机外设
搬砖的小码农_Sky1 天前
常见的显示器接口技术
嵌入式硬件·计算机外设·显示器
开开心心_Every2 天前
免费语音合成工具:66种音色随心选
人工智能·面试·java-ee·计算机外设·电脑·maven·excel
flysh053 天前
pyAutoGUI 模块主要功能介绍-(1)鼠标功能
python·计算机外设·鼠标控制
Winter_Sun灬4 天前
普通键盘在MacOS上如何使用快捷键
macos·计算机外设·键盘
瞬间记忆4 天前
如何使显示器在笔记本盖上盖子时还能正常运转
计算机外设
dujunqiu4 天前
S32K328上芯片内部RTC的使用和唤醒配置
mcu·计算机外设
嵌入式牛马在努力帮老板娶老婆5 天前
十三、STM32----LCD屏驱动
stm32·嵌入式硬件·计算机外设