【antd-design-vue】a-button 点击按钮置灰10秒后恢复
需求:点击按钮,按钮变成灰色,同时出现倒计时10秒,10秒后变回原来的按钮首先给按钮添加disabled属性,当绑的值为true的时候禁用再定义一个时间值<a-button type="primary" @click="reportBtn()" class="updateBtn" :disabled="updateDisableFlag"><span v-if="updateDi
·
需求:点击按钮,按钮变成灰色,同时出现倒计时10秒,10秒后变回原来的按钮
首先给按钮添加disabled属性,当绑的值为true的时候禁用
再定义一个时间值
<a-button type="primary" @click="reportBtn()" class="updateBtn" :disabled="updateDisableFlag">
<span v-if="updateDisableFlag">上报({{settimer}}")</span>
<span v-else>上报</span>
</a-button>
updateDisableFlag:false,
settimer:11,
然后在方法中设定时器,最重要的其实也就是定时器。当settimer==1的时候不禁用按钮,并且时间值回到原始,清除定时器。当settimer!==1的时候禁用按钮,时间减减。
reportBtn() {
let that = this
if(that.settimer==1){
that.updateDisableFlag = false
that.settimer = 11
return false
}else{
that.updateDisableFlag = true
that.settimer--;
}
setTimeout(function(){
that.reportBtn()
},1000)
},
朋友分享了另一种写法,亲测有效,标准的清除定时器
reportBtn() {
let that = this
let timer = setInterval(function(){
that.updateDisableFlag = true
that.settimer--;
if(that.settimer==0){
clearInterval(timer)
that.updateDisableFlag = false
that.settimer = 11
}
},1000)
}
更多推荐
已为社区贡献35条内容
所有评论(0)