【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>
相关推荐
zfysis5 小时前
键盘第一下无反应
计算机外设
Allen Bright10 天前
【JS-4.4-键盘常用事件】深入理解DOM键盘事件:提升用户交互体验的关键
javascript·计算机外设·交互
小天源11 天前
鼠标自动录制软件下载及使用
自动化测试·自动化·计算机外设·mouse recorder·鼠标录制·鼠标宏
小池先生11 天前
罗技键盘k380 fn按键问题 按f12不能直接打开调试,需要fn+f12
计算机外设
ai.Neo12 天前
(双模第2期)基于Nordic nRF52832的蓝牙键盘主控设计全流程详解
计算机外设
一眼青苔14 天前
vs code 如何开启按住ctrl和滚动鼠标来缩放字体大小
计算机外设
木尧大兄弟14 天前
Cubase 通过 MIDIPLUS MIDI 键盘进行走带控制的设置方法
计算机外设
老猿阿浪15 天前
React Native WebView键盘难题:如何让输入框不被键盘遮挡?
react native·react.js·计算机外设
西北丰15 天前
键盘 AK35I Pro V2 分析
单片机·嵌入式硬件·计算机外设
『六哥』16 天前
计算机硬件——外设、其他部件
计算机外设·电脑