vue中如何实现鼠标定位 $event 应用

首先了解：

1. 使用不带圆括号的形式，event 对象将被自动当做实参传入；

2. 使用带圆括号的形式，我们需要使用 $event 变量显式传入 event 对象。

<div id="app">
    <button v-on:click="click">click me</button>
</div>
...
var app = new Vue({
    el: '#app',
    methods: {
        click(event) {
            console.log(typeof event);    // object
        }
    }
});

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>


// js 部分
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

简单例子：div 鼠标经过现实弹窗，随鼠标移动

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

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

<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>

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'};
      },
    }
}


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'};
      },
    }
}