手机验证码倒计时

样式

点击“发送手机验证码”开启倒计时：

开启倒计时后，再次点击不会发起再次请求：

index.vue

<p class="title"><span class="required">*</span><span>手机号验证：</span>
</p>
<el-input v-model="verify" placeholder="输入验证码" style="width: 116px;"></el-input>
<span class="btn_verify" @click="sendCode">{{timer === 0 ? '发送手机验证码' : `${timer}s后重新获取`}}</span>

index.scss

.title {height: 32px;line-height: 32px;width: 130px;text-align: right;.required {color: #F76560;}
}
.btn_verify {cursor: pointer;color: #FFB200;margin-left: 8px;line-height: 32px
}

index.js

import { sendVerifyCode } from '@/api/myApi'export default {name: 'applyModal',data() {return {timer: 0,verify: null,params: {}}},mounted() {if (this.params.id !== this.$route.query.id) {this.params.id = +this.$route.query.id}},watch: {$route () {if (this.params.id !== this.$route.query.id) {this.params.id = +this.$route.query.id}}},methods: {sendCode () {// 开启倒计时效果if (this.timer === 0) {this.timer = 60setInterval(() => {if(this.timer <= 0) {return} else {// 单次定时任务执行的回调this.timer--}},1000,{// 默认不开启定时任务immediate: false})} else {return}let query = {}query.id = +this.params.id// 发送请求sendVerifyCode(JSON.stringify(query)).then((res) => {if (res.data.status === 0) {this.$message.success(res.data.msg || '手机验证码已发送，请注意查收!')} else {this.$message.error('手机验证码发送失败!')}})}}
}