【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>
相关推荐
小七de尾巴10 小时前
Linux下X11协议理解
linux·运维·计算机外设
Legendary_0081 天前
LDR6020驱动的Type-C接口显示器解决方案
c语言·开发语言·计算机外设
计算机毕设孵化场2 天前
计算机毕设-基于springboot的高校网上缴费综合务系统视频的设计与实现(附源码+lw+ppt+开题报告)
java·spring boot·计算机外设·音视频·课程设计·高校网上缴费综合务系统视频·计算机毕设ppt
码农小白3 天前
qt学习:linux监听键盘alt+b和鼠标移动事件
学习·计算机外设
计算机毕设孵化场3 天前
计算机毕设-基于springboot的多彩吉安红色旅游网站的设计与实现(附源码+lw+ppt+开题报告)
vue.js·spring boot·后端·计算机外设·课程设计·计算机毕设论文·多彩吉安红色旅游网站
kejijianwen4 天前
沸蛇鼠标,多功能智慧AI,重新定义生产力
人工智能·计算机外设
一秒美工助手4 天前
鼠标经过遮罩效果 详情页阿里巴巴国际站外贸跨境电商装修运营 详情页装修无线端装修手机装修设计代码证书滚动特效效果代码,自定义内容代码模板模块设计设置装修
前端·javascript·html·计算机外设
Dnelic-6 天前
查看台式机主机支持的最大分辨率 | 显卡和显示器
计算机外设·计算机显卡
yingge20176 天前
平价鼠标推荐-英菲克PW1有线鼠标
计算机外设
Leoysq6 天前
【UGUI】背包的交互01(道具信息跟随鼠标+道具信息面板显示)
计算机外设