项目中有个倒计时的需求,之前用 vue-countdown 做过获取验证码的倒计时,但是时间是写死的,现在想再用这个来做,但是把时间设置为变量之后倒计时不会发生变化,代码如下:
<vue-countdown :time="countDown" :interval="1000" :auto-start="true" ref="countdown" class="count-down">
<template slot-scope="props">{{ props.days }}天{{ props.hours }}时{{ props.minutes }}分{{ props.seconds }}秒</template>
</vue-countdown>
<script>
import axios from 'axios'
import VueCountdown from '@xkeshi/vue-countdown'
export default {
components: {
VueCountdown
},
data () {
return {
countDown: 0
}
},
created: function () {
axios({
method: 'GET',
url: 'http://a.b.c',
withCredentials: true,
headers: {'lang': 'zh', 'token': '', 'os': 'web', 'version': '1.0.0', 'time': ''}
}).then((response) => {
let responseData = response.data.data
let responseStatus = response.data.code
this.needNum = responseData.needNum
this.timeLeft = responseData.timeLeft
if (responseStatus == 200) {
this.payStatus = true
let now = new Date()
let timer = (this.timeLeft + 0) * 1000
let setNow = new Date(now.getTime() + timer)
this.countDown = setNow - now
this.$refs.countdown.init()
this.$refs.countdown.start()
} else if (responseStatus == 100) {
this.payStatus = false
} else if (responseStatus == 101) {
}
console.log(responseData)
}).catch((ex) => {
console.log(ex)
})
}
}
</script>
在 vue-countdown 的文档里也没看到相关的描述,如果要用它实现的话要怎么做呢?
1
cfort OP 什么鬼,代码里多了一些冗余的,刚编辑完提示我不能编辑。。。
|