文章很长,文章下面的倒计时按钮,倒计时的时候不能点击,倒计时结束,按钮能点击的效果
倒计时事件
// 按钮的倒计时
countdown() {
const that = this
//修改倒计时时间 这里写了10s
that.time = 10
const fn = setInterval(function() {
//每一秒自减一
that.time--
if (that.time == 0) {
//这里的kg是用来判断显示什么按钮的,在data中需要声明
that.kg= false;
// 去掉计时器 很重要一定要去掉
clearInterval(fn)
}
}, 1000);
},
data中的声明
data() {
return {
time:0,
kg: true //倒计时按钮是否可以点击 true不能点击
}
},
页面中内容;使用三元表达式 绑定不同状态的样式。
<button :class="kg == false ? 'submit' : 'nochoose'">
<text>{{kg == true ? '我已经知晓('+time+'s)' : '我已经知道' }}</text>
</button>