V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
cfort
V2EX  ›  Vue.js

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

  •  
  •   cfort · 2018-09-10 19:55:50 +08:00 · 2033 次点击
    这是一个创建于 2025 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目中有个倒计时的需求,之前用 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 条回复    2018-09-10 20:10:45 +08:00
    cfort
        1
    cfort  
    OP
       2018-09-10 20:10:45 +08:00
    什么鬼,代码里多了一些冗余的,刚编辑完提示我不能编辑。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5449 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 08:36 · PVG 16:36 · LAX 01:36 · JFK 04:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.