效果地址：https://codepen.io/jmwei/pen/XYBpaw
說(shuō)明：使用vue實(shí)現(xiàn)按鈕點(diǎn)擊倒計(jì)時(shí)效果
代碼實(shí)現(xiàn)：
<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: '倒計(jì)時(shí)',
totalTime: 5,
canClick: true,
},
methods: {
countDown() {
if (!this.canClick) { return }
this.canClick = false
this.content = this.totalTime + 's后重新發(fā)送'
let clock = setInterval(() => {
this.totalTime --
this.content = this.totalTime + 's后重新發(fā)送'
if (this.totalTime < 0) {
window.clearInterval(clock)
this.content = '倒計(jì)時(shí)'
this.totalTime = 5
this.canClick = true
}
}, 1000)
}
}
})
