如何在Vue中执行window.addEventListener这样的操作

在App.vue文件中执行window.addEventListene即可，这样所有页面都会对网络状态改变做出反应。日常开发中可能经常有类似的场景，比如检测登录状态等等，我们需要执行的逻辑必须挂载到全局中。对应用所有的页面都监听一个网络状态改变事件，当网络状态改变时，弹出对应的消息提示。这样虽然可以监听到事件，但只能在当前页面。最初想法是使用online监听事件。online事件并没有挂载到全局。

Eoned

3709人浏览 · 2023-03-02 17:02:28

Eoned · 2023-03-02 17:02:28 发布

需求内容

对应用所有的页面都监听一个网络状态改变事件，当网络状态改变时，弹出对应的消息提示

最初想法是使用online监听事件

window.addEventListener('online', () => {
            this.onLine = true
        })

这样虽然可以监听到事件，但只能在当前页面
online事件并没有挂载到全局

日常开发中可能经常有类似的场景，比如检测登录状态等等，我们需要执行的逻辑必须挂载到全局中

百度很久都没有答案，这里记录一下

方案

在App.vue文件中执行window.addEventListene即可，这样所有页面都会对网络状态改变做出反应

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^