效果地址：https://codepen.io/jmwei/pen/XYBpaw
说明：使用vue实现按钮点击倒计时效果
代码实现：
<div id="app">
<button class="button" :class="{disabled: !this.canClick}" @click="countDown"> {{content}} </button>
</div>
按钮样式：
.button{
color: #fff;
background: #409eff;
cursor: pointer;
border: 1px solid #dcdfe6;
border-color: #dcdfe6;
text-align: center;
font-weight: 500;
padding: 7px 20px;
font-size: 14px;
border-radius: 4px;
&:focus {
outline: none;
}
}
.disabled {
background-color: #ddd;
border-color: #ddd;
color:#57a3f3;
cursor: not-allowed;
}
JS操作：
var app = new Vue({
el: '#app',
data: {
content: '倒计时',
totalTime: 5,
canClick: true,
},
methods: {
countDown() {
if (!this.canClick) { return }
this.canClick = false
this.content = this.totalTime + 's后重新发送'
let clock = setInterval(() => {
this.totalTime --
this.content = this.totalTime + 's后重新发送'
if (this.totalTime < 0) {
window.clearInterval(clock)
this.content = '倒计时'
this.totalTime = 5
this.canClick = true
}
}, 1000)
}
}
})
