用Vue2写一个邮箱登录页面组件
时间: 2024-05-14 09:16:36 浏览: 8
好的,我可以为您提供一个基本的邮箱登录页面的Vue组件:
```
<template>
<div>
<form class="login-form" @submit.prevent="handleSubmit">
<div class="form-group">
<input type="email" class="form-control" placeholder="请输入邮箱" v-model="email" required>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="请输入密码" v-model="password" required>
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
handleSubmit() {
// 可以在这里处理登录逻辑,例如调用API验证用户的邮箱和密码是否正确
console.log('用户输入的邮箱:', this.email);
console.log('用户输入的密码:', this.password);
}
}
}
</script>
<style scoped>
.login-form {
max-width: 600px;
margin: auto;
padding: 30px;
background-color: #ecf0f1;
border-radius: 10px;
}
.form-group {
margin-bottom: 20px;
}
.form-control {
width: 100%;
padding: 12px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
.btn-primary {
display: block;
width: 100%;
padding: 12px;
font-size: 16px;
color: #fff;
background-color: #3498db;
border-radius: 5px;
border: none;
}
</style>
```
这个组件包含一个输入邮箱和密码的表单,并且使用了Vue的双向绑定功能(v-model)来绑定表单输入的值。在用户点击登录按钮时,会调用handleSubmit方法来处理登录逻辑。
你可以将这个组件运用到你的Vue项目中,并根据实际情况进行修改,例如添加更多的表单项或者验证逻辑。希望对你有所帮助!