如何在 vu-countdown 中使用变量作为剩余时间?

2018-09-10 19:55:50 +08:00
 cfort

项目中有个倒计时的需求,之前用 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 的文档里也没看到相关的描述,如果要用它实现的话要怎么做呢?

2069 次点击
所在节点    Vue.js
1 条回复
cfort
2018-09-10 20:10:45 +08:00
什么鬼,代码里多了一些冗余的,刚编辑完提示我不能编辑。。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/487975

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX