我必须设置一个10分钟的计时器,该计时器将重定向到主屏幕。此外,必须在每次操作时将其重置(例如,按下按钮)。我发现了这个计时器:https://github.com/fengyuanchen/vue-countdown是否可以在操作中重新启动它?
<countdown ref="countdown" @end="dosmth()" :time="time" :auto-start="false">
<template slot-scope="props">{{ props.seconds }}</template>
</countdown>
mounted() {
this.$refs.countdown.start();
},
dosmth: function(){
this.$refs.countdown.start();
}
这应该重新启动计时器,但即使这样也无法工作:
Basket.vue:378 [Vue警告]:事件处理程序中的“结束”错误:“ InternalError:递归过多”
也许有人可以帮助我吗?
答案 0 :(得分:0)
您可以使用setInterval
进行此操作,并在每次单击操作时将其值重置为初始值:
const TEN_MINUTES = 60 * 10
new Vue({
el: '#app',
data () {
return {
timer: TEN_MINUTES
}
},
filters: {
minutesAndSeconds (value) {
var minutes = Math.floor(parseInt(value, 10) / 60)
var seconds = parseInt(value, 10) - minutes * 60
return `${minutes}:${seconds}`
}
},
mounted () {
setInterval(() => {
this.timer -= 1
}, 1000)
},
methods: {
someAction () {
this.timer = TEN_MINUTES
},
someOtherAction () {
this.timer = TEN_MINUTES
}
},
template: `<div><div>Time Remaining: {{ timer | minutesAndSeconds }}</div><br><br><button @click="someAction">Some Action</button><button @click="someOtherAction">Some Other Action</button></div>`
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>