vuejs2 - 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;
}