Vue我想要一个图像跟随鼠标

Question

我遇到了Vue组件https://jsfiddle.net/shawnswebsites/fep1p02c/20/的问题。我在组件中有一个div，当用户的鼠标进入div时，我希望显示一个图像，我希望图像跟随鼠标。

new Vue({
  el: '#app',
  data: {
  	showImage: false,
    page: {
    	left : 0,
      top: 0
      },
     },
     methods: {
            onMouseMove(e) {
                console.log('page x: ' + this.page.left);
                this.page.left = e.pageX;
                this.page.top = e.pageY;
            }
     }
  })

.container {
  height: 400px;
  width: 400px;
  border: 1px solid #FFF;
  background-color: grey;
  margin: 40px;
}

.image {
        position: absolute;
        z-index: 1000;
        overflow:hidden;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div class="container"           
  @mouseenter="showImage = true"
             @mousemove.self="onMouseMove($event)"
             @mouseleave="showImage = false">
    
  </div>
  <img v-show="showImage" class="image" src="http://via.placeholder.com/350x150" :style="{ left: page.left + 'px', top: page.top + 'px' }">
</div>

我使用@mouseenter显示图像，使用@mouseleave隐藏图像。但是，当我滚动div时，仍会调用@mouseleave，这会导致图像闪烁。可以帮忙吗？

Answer 1

如下面的评论中的Oxcarga所述，您需要在图像样式中添加pointer-events: none;：

.image {
    position: absolute;
    z-index: 1000;
    overflow:hidden;
    pointer-events: none;
}