vue 添加移除beforeunload事件

Posted 2021-01-02 bearwcn

 var vue = new Vue({
        el: ‘#app‘,
        methods: {
            //添加beforeunload监听事件
            createBeforeunloadHandler() {
                //window.addEventListener(‘beforeunload‘, e => this.beforeunloadHandler(e));
                window.addEventListener(‘beforeunload‘, this.beforeunloadHandler, false);
            },
            //移除beforeunload事件
            destroyedBeforeunloadHandler() {
                //window.removeEventListener(‘beforeunload‘, e => this.beforeunloadHandler(e));//错误方法，无法移除
                window.removeEventListener(‘beforeunload‘, this.beforeunloadHandler, false);
                //this.rowEditEnable = 0;
            },
            //beforeunload监听事件
            beforeunloadHandler(e) {
                    e.returnValue = "确定要关闭窗口吗？";
                    console.log("释放权限操作");
                    //释放权限操作，无阻塞
                    //用户点击取消后执行，恢复操作
                    setTimeout(function () {
                        setTimeout(function () {
　　　　　　　　　　　　　　　　 console.log("恢复用户权限操作"); 
　　　　　　　　　　　　　　}, 50)
                    }, 50);
            },
         },
         beforeDestroy() {
            //在 beforeDestroy 钩子移除beforeunload事件
            this.destroyedBeforeunloadHandler();
         },
});