javascript - VueJS 和 Laravel，当用户离开屏幕时执行发布请求

Question

请寻求一些帮助。

我需要检查输入是否已填写，然后如果用户将屏幕留给选项卡或后退按钮等，则会发生发布请求。

 sendSMS: function(e) {
        if(this.to) {
            this.$http.post('/demo/send', message)
        }
 }

当输入不为空并且用户离开站点区域屏幕(即向上走向选项卡或后退按钮)时，我需要说些什么，然后执行发布请求。因此，不会按下任何按钮来提交此内容，而是检查输入是否已填写以及用户是否离开屏幕。

在我使用的上述方法中如何使用 VueJS 来做到这一点？

Answer 1

在页面关闭时运行js函数:Run JavaScript code on window close or page refresh?

您需要在 Vue 的就绪函数中添加事件监听器:

....
data:function(){
    return {sentRequest:false}
},
ready:function(){
    window.onbeforeunload = this.leaving;
    window.onblur = this.leaving;
    window.onmouseout = this.leaving;

},
methods:{
    leaving:function(){
        if(!this.sentRequest){
             //do stuff
             this.sentRequest = true;
        }
        return null;
    }
}
....