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

你可以使用 Vue.js 和一些图标库来实现实时显示网络状态带图标的功能。下面是一个简单的实例：

首先，你需要在你的项目中安装 Vue.js 和一个图标库，比如 Font Awesome：

npm install vue font-awesome

然后，在你的 Vue 组件中，可以这样实现：

<template>
  <div>
    <span>
      <i :class="['fa', 'fa-fw', networkStatusIcon]"></i>
      {{ networkStatus }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      networkStatus: 'Disconnected', // 初始化为断开连接状态
    };
  },
  computed: {
    networkStatusIcon() {
      return this.networkStatus === 'Connected' ? 'fa-check-circle' : 'fa-times-circle';
    },
  },
  mounted() {
    // 监听网络状态变化，根据实际情况使用相应的方法
    window.addEventListener('online', this.updateNetworkStatus);
    window.addEventListener('offline', this.updateNetworkStatus);
  },
  beforeDestroy() {
    // 在组件销毁之前移除事件监听
    window.removeEventListener('online', this.updateNetworkStatus);
    window.removeEventListener('offline', this.updateNetworkStatus);
  },
  methods: {
    updateNetworkStatus() {
      this.networkStatus = navigator.onLine ? 'Connected' : 'Disconnected';
    },
  },
};
</script>

在上述代码中，我们使用了一个 `networkStatus` 数据来表示网络状态，并通过计算属性 `networkStatusIcon` 来根据网络状态返回相应的图标类名。在组件的 `mounted` 钩子中，我们监听了 `online` 和 `offline` 事件，当网络状态发生变化时，调用 `updateNetworkStatus` 方法来更新网络状态。在组件销毁之前，我们移除了事件监听。

最后，你可以在你的页面中使用这个组件来显示网络状态：

<template>
  <div>
    <network-status></network-status>
  </div>
</template>

<script>
import NetworkStatus from './NetworkStatus.vue';

export default {
  components: {
    NetworkStatus,
  },
};
</script>

这样，当网络状态发生变化时，图标和文本会实时更新显示。你可以根据自己的需求修改图标样式和网络状态文本。