考试倒计时组件 -- @choujiaojiao/vue2-countdown

引言

vue-countdown 是一个无依赖项的轻量级 Vue 组件，轻松实现倒计时需求，摆脱时间函数烦恼。

1.安装

yarn add @choujiaojiao/vue2-countdown
or
npm install @choujiaojiao/vue2-countdown

2.使用

<template>
  <Countdown :time="time" format="hh:mm:ss" @on-end="onCountdownEnd">
    <template slot-scope="{ time }">{{ time }}</template>
  </Countdown>
</template>
 
<script>
  import Countdown from '@choujiaojiao/vue2-countdown'
  
  export default {
    components: { Countdown },
    data () {
      return {
        time: 6666
      }
    },
    methods: {
      onCountdownEnd() {
      // 倒计时结束的逻辑
        console.log('countdown end~')
      }
    }
  }
</script>

属性说明：

属性	描述	类型	默认值
time	倒计时时间差（秒）	Number	0
format	倒计时格式	String	–

方法说明

方法	描述
on-end	倒计时结束回调
到此，倒计时组件可以正常使用了。但是可能会遇到2个问题：

1.初次加载页面，倒计时不显示，刷新之后才显示倒计时
2.当该页面切到后台之后，倒计时时间有误差

那么，怎么解决这两个问题呢？接下来，我们来分析一下
第一个问题相对简单，我们分析其加载顺序，可以发现，倒计时时间，是需要接口数据拿到之后，在处理计算一下的，此时页面早已经渲染完了，所以初次渲染的时候，可能会出现倒计时不显示的问题。找到原因之后，我们来想解决办法。我们可以尝试让倒计时组件默认不加载，等数据计算好之后，在渲染该组件。于是，我们可以这样

<template>
  <Countdown :time="time" format="hh:mm:ss" @on-end="onCountdownEnd" v-if="hideCountdown">
    <template slot-scope="{ time }">{{ time }}</template>
  </Countdown>
</template>
<script>
  import Countdown from '@choujiaojiao/vue2-countdown'
  
  export default {
    components: { Countdown },
    data () {
      return {
        time: 6666,
        hideCountdown: false
      }
    },
    methods: {
      onCountdownEnd() {
      // 倒计时结束的逻辑
        console.log('countdown end~')
      },
      getData () {
        // 这里写你自己的接口，拿到数据，并计算处理数据的逻辑
        this.time = 6666
        // 此时数据拿到了，我们来让组件渲染
        this.hideCountdown = true
      }
    }
  }
</script>

这样第一个问题就解决了，如果有更好的方法欢迎留言。
接下来是第二个问题，既然该页面切到后台之后倒计时就有问题了，那么我们可以检测一下页面切入后台，然后在做一些操作，于是，我们先监测一下页面挂起与呼出

mounted () {
    const _this = this
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        // 页面被挂起
        _this.hideCountdown = false
      } else {
        // 页面呼出
        _this.checkViChange()
      }
    })
  },

我们在页面被挂起的时候，隐藏掉倒计时，当页面挂起的时候，在调取接口，获取一下时间戳，然后我们在重新计算倒计时，这样就不会有误差啦

methods: {
    checkViChange () {
      if (!document.hidden) {
        this.getServerTime()
      }
    },
    // 获取服务器时间戳
    getServerTime () {
      this.$api.exam.getTime().then(res => {
        // 这里是我们考试倒计时，计算时间的方法，可以根据自己的业务需求，去计算倒计时的时间
        this.getTimeVal(endTime, headCreateTime, answerDuration, res.data.serverTime)
        this.hideCountdown = true
      })
    },
  }

到这里，一个倒计时就完成了。有不足之处欢迎指出

• 本文作者： Gladysdrea
• 本文链接： https://gladysdrea.github.io/blogs/2020/12/25/Vue系列/考试倒计时组件/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！