vue2 实时显示网路状态带图标

您可以使用Vue.js和一些现有的图标库来实时显示网络状态带图标。以下是一个基本的示例：

1. 首先，安装Vue.js和一个图标库，比如Font Awesome：

npm install vue font-awesome

2. 在您的Vue文件中，导入Vue和图标库：

import Vue from 'vue'
import 'font-awesome/css/font-awesome.css'

3. 在Vue组件中，使用一个data属性来存储网络状态的值：

data() {
  return {
    networkStatus: 'online' // 默认为在线状态
  }
}

4. 在模板中，使用Vue的条件渲染和图标库来根据网络状态显示不同的图标：

<template>
  <div>
    <!-- 根据网络状态显示不同的图标 -->
    <i v-if="networkStatus === 'online'" class="fa fa-wifi"></i>
    <i v-else class="fa fa-wifi fa-flip-horizontal"></i>
  </div>
</template>

5. 可以使用Vue的生命周期钩子函数和`navigator.onLine`属性来实时更新网络状态：

created() {
  // 监听网络状态变化
  window.addEventListener('online', this.updateNetworkStatus)
  window.addEventListener('offline', this.updateNetworkStatus)

  // 初始化网络状态
  this.updateNetworkStatus()
},
destroyed() {
  // 移除事件监听器
  window.removeEventListener('online', this.updateNetworkStatus)
  window.removeEventListener('offline', this.updateNetworkStatus)
},
methods: {
  updateNetworkStatus() {
    this.networkStatus = navigator.onLine ? 'online' : 'offline'
  }
}

这样，当网络状态变化时，图标将实时更新为相应的状态。您可以根据需要调整样式和图标库。