我在使用 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 仍然被调用,这导致图像闪烁。有什么帮助吗?
最佳答案
如前所述Oxcarga在下面的评论中,您需要将 pointer-events: none;
添加到您的图像样式中:
.image {
position: absolute;
z-index: 1000;
overflow:hidden;
pointer-events: none;
}
关于vuejs2 - Vue我想要一个图像跟随鼠标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49343282/