用vue写一个前端手机发送验证码登录代码,要求使用elementui
时间: 2023-02-28 11:31:59 浏览: 70
好的,下面是一份使用 Vue 和 Element UI 实现手机验证码登录的代码示例:
```
<template>
<div>
<el-form ref="form" :model="form">
<el-form-item label="手机号码">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item label="验证码">
<el-input v-model="form.code"></el-input>
<el-button v-if="!countdown" @click="sendCode">发送验证码</el-button>
<el-button v-else disabled>{{countdown}}</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
phone: '',
code: ''
},
countdown: 0
}
},
methods: {
sendCode() {
// 这里可以发送验证码请求到后端
this.countdown = 60
const timer = setInterval(() => {
this.countdown--
if (this.countdown === 0) {
clearInterval(timer)
}
}, 1000)
},
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 这里可以发送登录请求到后端
} else {
console.log('表单验证失败')
}
})
}
}
}
</script>
```
希望这份代码能够帮助你。