vue实现倒计时效果
效果地址: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) } } })