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

发送验证码倒计时

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 = code
			return code

		},
		//发送验证码
		sendcode() {			
			if (!this.timer) {
				this.count = TIME_COUNT
				this.show = false
				this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--
					} else {
						this.show = true
						clearInterval(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
				} 
			}
		},
	}
}

效果