考试倒计时组件

2024-07-05 04:25| 来源: 网络整理| 查看: 265

引言

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

1.安装123yarn add @choujiaojiao/vue2-countdownornpm install @choujiaojiao/vue2-countdown 2.使用123456789101112131415161718192021222324 {{ time }} import Countdown from '@choujiaojiao/vue2-countdown' export default { components: { Countdown }, data () { return { time: 6666 } }, methods: { onCountdownEnd() { // 倒计时结束的逻辑 console.log('countdown end~') } } } 属性说明：属性描述类型默认值 time 倒计时时间差（秒） Number 0 format 倒计时格式 String – 方法说明方法描述 on-end 倒计时结束回调到此，倒计时组件可以正常使用了。但是可能会遇到2个问题：

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

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

123456789101112131415161718192021222324252627282930 {{ time }} 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 } } }

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

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

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

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

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

【本文地址】

公司简介

联系我们