早些时候问了一个类似的问题，但我已经坚持了一段时间。
我有一个在某些事件上显示v的div，例如当鼠标悬停在div1上并点击div2时。我想这样做，当鼠标在一定时间内没有碰到它时，这个div消失了，让我们说三秒钟。
我的问题是我无法使用v-on：mouseleave（因为div出现时没有鼠标在它上面）所以我需要一些东西，在一定的延迟后切换div上的v-show。有什么我想念的吗？我该怎么用？
谢谢！
答案 0 :(得分：0)
您可以setTimeout在您的组件呈现功能（或任何其他功能）中，在预定义的时间段后将this.visible = true更改为this.visible = false。
答案 1 :(得分：0)
最简单的方法是使用一个组件并在挂钩中添加一个事件监听器，该挂钩使用超时来设置附加到Vue.component('my-deiv', {
template: `<template id="block"><div v-show="show">A div</div></template>`,
mounted(){
this.$el.addEventListener('mousemove', () => {
setTimeout( () => {
this.show = false;
}, 3000)
})
},
data(){
return{
show: true
}
}
});
的标志，所以：
div现在，只要鼠标在div上移动就会触发超时，这里是JSFiddle：webpack
修改
如果你想在鼠标没有移动一段时间时隐藏Vue.component('block', {
template: "#block",
mounted() {
this.timer = null;
this.$el.addEventListener('mousemove', () => {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.show = false;
}, 3000)
})
this.$el.addEventListener('mouseleave', () => {
clearTimeout(this.timer);
})
},
data() {
return {
show: true
}
}
})
- 但是当鼠标退出时不能隐藏，那么你可以在每次鼠标移动时重新启动超时然后取消当鼠标离开时，这就是更新版本：
CONFIG_CFS_BANDWIDTHJSFiddle：https://jsfiddle.net/nb80sn52/