vue 监听页面和窗口关闭操作

876 阅读1分钟
<script>
import { defineComponent,onMounted, onUnmounted } from 'vue'

export default defineComponent({
  setup() {
        let _beforeUnload_time = '';
        let _gap_time = '';


        let beforeunloadHandler = (e) => {
            _beforeUnload_time = new Date().getTime();
            //e.returnValue = '关闭提示'; 弹窗
        };
        let unloadHandler = (e) => {
            _gap_time = new Date().getTime() - _beforeUnload_time;
            //判断是窗口关闭还是刷新
            if (_gap_time <= 5) {
                localStorage.setItem("pcjiuselutoken", null);
            }
        };
        onMounted(() => {
            window.addEventListener("beforeunload", (e) => beforeunloadHandler(e));
            window.addEventListener("unload", (e) => unloadHandler(e));

        })

        onUnmounted(() => {
            window.removeEventListener("beforeunload", (e) => beforeunloadHandler(e));
            window.removeEventListener("unload", (e) => unloadHandler(e));
        })
    }
})
</script>