Question

早些时候问了一个类似的问题，但我已经坚持了一段时间。

我有一个在某些事件上显示v的div，例如当鼠标悬停在div1上并点击div2时。我想这样做，当鼠标在一定时间内没有碰到它时，这个div消失了，让我们说三秒钟。

我的问题是我无法使用v-on：mouseleave（因为div出现时没有鼠标在它上面）所以我需要一些东西，在一定的延迟后切换div上的v-show。有什么我想念的吗？我该怎么用？

谢谢！

Answer 1

您可以setTimeout在您的组件呈现功能（或任何其他功能）中，在预定义的时间段后将this.visible = true更改为this.visible = false。

Answer 2

最简单的方法是使用一个组件并在挂钩中添加一个事件监听器，该挂钩使用超时来设置附加到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_BANDWIDTH

JSFiddle：https://jsfiddle.net/nb80sn52/

当鼠标没有超过x时间，vue.js时隐藏div

2 个答案: