参考网上的写过一个，但是第二次发送验证码倒计时会加快，调整后可用。话不多说，直接上代码。
页面：
<div class="iptbx round"><div class="txt"><input type="text" class="ipttype" name="username" v-model="model.username" placeholder="手机号" @keydown.enter="login"></div></div><div class="check">// 短信验证码输入框<div class="msg round"><div class="txt"><input type="text" class="ipttype" name="code" v-model="code" placeholder="短信验证码" @keydown.enter="login"></div></div>// 发送验证码按钮--可点击的<div class="btn round" @click="sendSms()" v-if="!isDisabled">{{content}}</div>// 发送验证码按钮--不可点击的<div class="btn round wait" v-if="isDisabled">{{content}}</div></div>
js:
data () {return {isDisabled: false, //控制按钮是否可以点击（false:可以点击，true:不可点击）content: '获取短信验证码', // 发送验证码按钮的初始显示文字timer: null,count: '',model: {},}},methods: {// 发送验证码sendSms () {let vm = this// 校验手机号if (!vm.model.username || vm.model.username == '') {vm.$layer.msg('请输入手机号')return}if (!(/^1[34578]\d{9}$/.test(vm.model.username))) {vm.$layer.msg('请输入正确的手机号')return}// 请求后台发送验证码至手机（vm.model内存有username字段为用户手机号,下述方法是自己项目封装的api请求（import引入的，没在此代码块显示），可根据自己实际请求方式修改）getVerifyCode(vm.model).then((res) => {vm.isDisabled = false})// 控制倒计时及按钮是否可以点击const TIME_COUNT = 60vm.count = TIME_COUNTvm.timer = window.setInterval(() => {if (vm.count > 0 && vm.count <= TIME_COUNT){// 倒计时时不可点击vm.isDisabled = true// 计时秒数vm.count--// 更新按钮的文字内容vm.content = vm.count + 's后重新获取'} else {// 倒计时完，可点击vm.isDisabled = false// 更新按钮文字内容vm.content = '获取短信验证码'// 清空定时器!!!clearInterval(vm.timer)vm.timer = null}}, 1000)}}}
