vue使用element发送手机验证码倒计时

article/2025/8/27 19:41:22

发送验证码倒计时

html

          <el-form class="form"   :model="form" labeal-position="left">	<el-form-item label="姓名"><el-input v-model="form.Name" placeholder="请输入姓名"></el-input></el-form-item><el-form-item label="电话"><el-input v-model="form.Phone" placeholder="请输入电话"></el-input></el-form-item><el-form-item label="验证码"><el-input v-model="form.Code" placeholder="请输入验证码" @blur="blurcheck"><el-button slot="suffix" size="mini" style="border: none;" @click="sendcode":disabled="!show">获取验证码<span v-show="!show" class="count">({{count}}s)</span></el-button></el-input></el-form-item></el-form>

js

export default{
const TIME_COUNT = 30;  //倒计时时间data(){return{timer:null,//计时器code:"",//验证码count:"",//倒计时show:true,//控制按钮form:{Name:"",Phone:"",Code:""}},methods:{//获得六位数验证码generatedCode() {const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]let code = ''for (let i = 0; i < 6; i++) {let index = Math.floor(Math.random() * 10)code += random[index]}console.log(code)this.code = codereturn code},//发送验证码sendcode() {			if (!this.timer) {this.count = TIME_COUNTthis.show = falsethis.timer = setInterval(() => {if (this.count > 0 && this.count <= TIME_COUNT) {this.count--} else {this.show = trueclearInterval(this.timer) // 清除定时器this.timer = null}}, 1000)}//这里写请求axios.post(url参数之类的).then(res=>{})},//在输入完成后可以判断一下blurcheck() {if (this.form.Code.length < 6 ) {return false} else {if (this.code != this.form.Code &&  this.form.Code!= '') {this.$message.error("验证码错误")return false} }},}
}