Vue实现倒计时小功能
时间：2022-05-27 09:46:59|栏目：vue|点击： 次
很多项目中都需要实现倒计时功能，例：发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局，简单操作，简单效果，最主要的是思路和倒计时步骤理解！！！
例、代码如下：
要求：点击提交按钮倒计时五秒，倒计时期间输入框和提交按钮禁用，倒计时结束后输入框和提交按钮再变成正常状态
1、先实现要求的html布局，添加点击事件
<div>
<!-- disabled为true禁用 -->
输入框：<input type="text" :disabled="istrue">
<button @click="addHandle" :disabled="istrue">提交</button>
<!-- 倒计时文字提示 -->
<p>{{this.txt}}</p>
</div>
2、点击提交按钮倒计时开始变禁用状态，定义一个计时器
<script>
export default {
data(){
return {
txt:'',
istrue:false,
inp:''
}
},
methods:{
addHandle(){
//定义n=5秒
let n=5
//定义定时器time
let time=setInterval(()=>{
//禁用
this.istrue=true
//改变倒计时文字提示
this.txt=n+'秒后提交'
n--
//如果n<0，清除定时器，禁用状态取消，文字提示为空（不显示）
if(n<0){
this.txt=""
this.istrue=false
clearInterval(time)
}
},1000)
}
}
}
</script>
思路步骤都写在上方注释里了，一个简单的倒计时就这样轻易实现了。
整体代码：
<template>
<div>
<!-- disabled为true禁用 -->
输入框：<input type="text" :disabled="istrue">
<button @click="addHandle" :disabled="istrue">提交</button>
<!-- 倒计时文字提示 -->
<p>{{this.txt}}</p>
</div>
</template>
<script>
export default {
data(){
return {
txt:'',
istrue:false,
inp:''
}
},
methods:{
addHandle(){
//定义n=5秒
let n=5
//定义定时器time
let time=setInterval(()=>{
//禁用
this.istrue=true
//改变倒计时文字提示
this.txt=n+'秒后提交'
n--
//如果n<0，清除定时器，禁用状态取消，文字提示为空（不显示）
if(n<0){
this.txt=""
this.istrue=false
clearInterval(time)
}
},1000)
}
}
}
</script>
