VUE跟随鼠标悬浮框效果示例

VUE跟随鼠标悬浮效果示例

功能要求：

1.鼠标悬浮到某一图片logo位置，出现悬浮框显示此logo对应的企业主体基本信息

2.悬浮框跟随鼠标的位置出现

效果图如下：

分析页面结构：

1.logo图片部分用ul li 循环结构

2.悬浮框部分单独写一个div，用position absolute定位

分析功能实现：

1. @mouseenter @mouseleave 控制悬浮框的显示隐藏

2.@mousemove 控制悬浮框出现的位置

代码实现：

1. template 部分

<ul class="netimage">
   <li  v-for="(item,index) in data_content" 
   		:key="index" 
   		@mouseenter="enter(item)" 
   		@mouseleave="leave" 
   		@mousemove="updateXY"
   	>
     <img :src="item.imgPath+item.imgName"/>
   li>
ul>

<div v-show="seen" class="hover_con" :style="positionStyle">
	  //  悬浮框内容
div>

2. script 部分

export default {
    name: 'netImage',
    data() {
        return {
          data_content:[],
          seen:false,
          x:0,
          y:0,
          positionStyle:{top:'20px',left:'20px'},
        };
    },
    methods: {
      enter(item){
        this.seen = true;
      },
      leave:function(){
        this.seen = false;
      },
      updateXY:function(event){
        this.x=event.pageX;
        this.y=event.pageY;
        this.positionStyle={top: this.y-164 + 'px',left: this.x-374 + 'px'};
      },
    }
}

3.style部分不写了