To create a simple solution, you can utilize a component and incorporate an event listener within the mounted hook that utilizes a timeout to control a flag connected to v-show. This way:
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
}
}
});
Whenever the mouse moves over the div, it triggers the timeout functionality. To see it in action, check out the JSFiddle link provided: https://jsfiddle.net/nb80sn52/
UPDATE
If your intention is to hide the div only when the mouse remains idle on it for a specific duration, without triggering when the mouse exits, you can reset the timeout with each mouse movement and cancel it completely upon mouse leave. Here's the revised version:
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
}
}
})
You can view the updated functionality in action through this JSFiddle link: https://jsfiddle.net/utaaatjj/