美文网首页
考试倒计时组件 -- @choujiaojiao/vue2-co

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

作者: Avery_G | 来源:发表于2020-12-25 15:11 被阅读0次

    引言

    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
          })
        },
      }
    

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

    相关文章

      网友评论

          本文标题:考试倒计时组件 -- @choujiaojiao/vue2-co

          本文链接:https://www.haomeiwen.com/subject/ktvbnktx.html