vue开发：获取断网状态后然后再联网

在项目开发中需要获取断网的状态，查阅资料，思路就是用定时器轮循访问服务器的一张图片。

1.利用图片的onerror 事件监听，当请求图片失败后会执行该函数，触发断网提示。

<img :src="netWorkImgUrl" style="display: none" @error="getImgError" @load="loadImage" alt="" />

使用定时器访问服务器的地址，访问异常就会触发@error方法

          // 定时器轮循访问服务器的图片
          setInterval(() => {
            if (this.netWorkFlag) {
              return;
            }
            const timeStr = Date.parse(new Date());
            this.netWorkImgUrl =
              "https://avatar-static.segmentfault.com/298/159/2981596230-5c26da543bafd_big64=" +
              timeStr;
          }, 10000);

3.下面是完整代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>vue开发：获取断网状态后然后再联网</title>
  <!--引入 element-ui 的样式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      padding: 50px;
    }
    span {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="mask" v-show="isShow">
      <div class="lx-toast lx-toast-top">
        <div class="toast">
          当前已断网，请连接网络后刷新页面
          <el-button @click="refresh" type="primary">点击刷新</el-button>
        </div>
      </div>
      <img :src="netWorkImgUrl" style="display: none" @error="getImgError" @load="loadImage" alt="" />
    </div>
    <div v-show="!isShow">内容正常渲染</div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          isShow: false,
          netWorkImgUrl:
            "https://avatar-static.segmentfault.com/298/159/2981596230-5c26da543bafd_big64?timeStr=" +
            Date.parse(new Date()),
          netWorkFlag: false,

        }
      },
      created() {
        this.getNetwork();
      },
      methods: {
        refresh() {
          // 刷新页面
          location.reload();
        },
        getNetwork() {
          // 定时器轮循访问服务器的图片
          setInterval(() => {
            if (this.netWorkFlag) {
              return;
            }
            const timeStr = Date.parse(new Date());
            this.netWorkImgUrl =
              "https://avatar-static.segmentfault.com/298/159/2981596230-5c26da543bafd_big64=" +
              timeStr;
          }, 10000);
        },
        // 图片异常触发
        getImgError(e) {
          this.netWorkFlag = true;
          this.isShow = true;
        },
        loadImage(e) {
          console.log(e, "网络状态正常===");
        },
      },
    })
  </script>
</body>

</html>

4.效果

vue开发：获取断网状态后然后再联网

我的一个道姑朋友

引用和评论

微信小程序:修改对象数组中的某个元素

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

更强大、更灵活！ defineModel 重新定义双向绑定

使用CSS给标题添加书名号并超出省略

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！