博客

监控网络变化,并随之改变字体颜色

在css中,定义一个没有网络时字体要显示的颜色:

.changeColor{
      color: #5f696e;
    }

home.vue文件的template中:

 <div class="getCC">尊 敬 的 {{userName}} 用 户， 欢 迎 您 登 录 ~
 </div>

home.vue文件的script中

export default {
  data () {
    return {
      onLine: navigator.onLine
    }
  },
  methods: {
    // 改变onLine值
    // 正常->异常
    updateOnlineStatuss (e) {
      const { type } = e
      this.onLine === 'online'
      //使用querySelector方法,返回匹配该选择器的元素节点
      let changeTextColor = document.querySelector('.getCC')
      //当网络异常时changeColor属性颜色覆盖原来的
      changeTextColor.classList.add('changeColor')
    },
    // 异常->正常
    updateOnlineStatus (e) {
      const { type } = e
      this.onLine === 'offline'
      let textColor = document.querySelector('.getCC')
      //当网络恢复时,移除changeColor属性
      textColor.classList.remove('changeColor')
    }
  },
   mounted () {
    // 监听网络
    // 网络由异常到正常触发
    window.addEventListener('online', this.updateOnlineStatus)
    // 网络由正常到异常触发
    window.addEventListener('offline', this.updateOnlineStatuss)
  },
  //销毁
  beforeDestroy () {
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOnlineStatuss)
  }

总觉得我写的有点冗余,大家发现有更好的写法一定要告诉我呀~