需求:
注册或修改密码等成功,5秒
后跳转到首页。
test.vue
示例:
<template>
<div class="timedown-outside">
<h3><i>{{countDown}}</i> 秒后跳转到<span>首页</span> </h3>
<button @click="timeDown">点击开始倒计时</button>
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
countDown: 5,
timer: ''
}
},
methods: {
//*** 利用计时器,控制用于倒计时的变量countDown(1秒减1),countDown为 0 时 清除该定时器,并跳转到首页。
timeDown () {
if (!this.timer) {
this.timer = setInterval(() => {
if (this.countDown > 0) {
this.countDown--
} else {
clearInterval(this.timer)
this.$router.push({ path: '/' })
}
}, 1000)
}
}
}
}
</script>
<style>
.timedown-outside{
width:300px;
height:150px;
padding-top:50px;
margin: auto;
background:lightyellow;
}
span{
color:#f40;
}
span:hover{
color:purple;
text-decoration:underline;
cursor:pointer;
font-size:16px;
}
i{
font-size: 24px;
}
</style>
点击按钮前:
点击按钮,倒计时中:
倒计时完成,后跳转到首页: