Question

我正在尝试使用vue js创建飞行通知，例如Facebook通知。

如何将setTimeout暂停并在悬停被移除后重新启动？

这是我所做的。.

我有一个名为noti的组件和一个用于通知项目的vuex存储。基于单击，我填充了商店noti:[]，并显示了组件通知。我的Noti组件。

<div class="fly_noti_area">
        <div class="fly_noti_all" v-for="(n,i) in noti" @mouseover="hover(i)" :key="i">
            <div class="fly_noti">
                <div class="fly_noti_img">
                    <img class="fly_noti_img_image" src="/uploads/user.png" alt="" title="">
                </div>
                <div class="fly_noti_main flex-space">
                    <p class="fly_noti_text"><span class="fly_noti_text_name">Hkm sadek</span> comment on your status</p>
                    <p class="fly_noti_time"><Icon type="md-chatboxes" /> a few minites ago</p>
                </div>

                <div class="fly_noti_remove">
                    <Icon type="md-close" />
                </div>
            </div>
        </div>
     </div>

而js是

<script>
import {mapGetters} from 'vuex'
export default {
data(){
    return {
        a:false
    }
},
methods: {
    removeit(){
        this.a = setTimeout( ()=>{
            this.$store.commit('remove')
            clearTimeout(this.a)
        },4000)

    },
    hover(i){
        clearTimeout(this.a) // does't work
    }
},
computed: {
    ...mapGetters([
        'noti'
    ])
},
updated() {
    this.removeit()
 }

}
</script>

我没有得到pause的概念。

问题是，当您将鼠标悬停在一个div上时，在这种情况下，可能会有很多div，如果将鼠标悬停在一个div上，您会知道将鼠标悬停在了哪个div上，但是如何知道应该清除哪个超时？？

谢谢您的时间。

如何在vue js中暂停setTimeout

0 个答案: