divをマウスでクリックしたときにx時間が経過していない場合、vue.js

Question

はこれまでに同様の質問をしていましたが、しばらくの間このままでした。

たとえば、div1にマウスを合わせてdiv2をクリックしたときなど、特定のイベントでv-showsを表示するdivがあります。私はマウスが一定の時間それに触れていないときにこのdivが消えるようにしたい、3秒を言う。

私の問題は私がv-onを使うことができないことです：mouseleave（マウスの上にマウスが置かれていないと表示されるので）ので、特定の遅延後にdiv-v-showをトグルする必要があります。私は行方不明のものがありますか？私は何を使うべきですか？

ありがとうございました！

Answer 1

からthis.visible = falseに変更されたコンポーネントのレンダリング機能（またはその他の機能）で、setTimeoutを定義済みの期間後に実行できます。

Answer 2

最も簡単な方法は、コンポーネントを使用するので、v-showに取り付けられたフラグを設定し、タイムアウトを使用して取り付けられたフックにイベントリスナーを追加することである：DIV上今たびにマウスの動きを

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

それはここで、タイムアウトを発射JSFiddleです：あなたはマウスがあるときdivを非表示にする場合https://jsfiddle.net/nb80sn52/

EDIT

一定の時間のためにそれに移動していない - しかし、マウスの終了は、その後、あなたがタイムアウトするたびに再起動することができないときにマウスの葉、ここで更新されたバージョンだときに、マウスの移動とは完全にそれを取り消す：

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 
    } 
    } 
}) 

そしてJSFiddleのために：https://jsfiddle.net/utaaatjj/