elementplus登陆注册模板
时间: 2023-09-28 12:11:16 浏览: 226
以下是一个简单的 Element Plus 登录注册模板,供您参考:
```html
<template>
<div class="login-register">
<el-tabs v-model="activeTab" type="border-card">
<el-tab-pane label="登录" name="login">
<el-form :model="loginForm" ref="loginForm" :rules="loginRules" label-width="80px" class="login-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="注册" name="register">
<el-form :model="registerForm" ref="registerForm" :rules="registerRules" label-width="80px" class="register-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="registerForm.confirmPassword" placeholder="请再次输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register">注册</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 'login',
loginForm: {
username: '',
password: ''
},
registerForm: {
username: '',
password: '',
confirmPassword: ''
},
loginRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
},
registerRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请再次输入密码', trigger: 'blur' }
]
}
}
},
methods: {
login() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 登录逻辑
} else {
console.log('登录表单验证失败')
return false
}
})
},
register() {
this.$refs.registerForm.validate(valid => {
if (valid) {
// 注册逻辑
} else {
console.log('注册表单验证失败')
return false
}
})
}
}
}
</script>
<style scoped>
.login-register {
width: 400px;
margin: 50px auto;
}
.login-form, .register-form {
margin-top: 20px;
}
</style>
```
在这个模板中,我们使用了 Element Plus 的 `el-tabs` 组件来实现登录和注册两个选项卡。每个选项卡内部都包含一个表单,使用了 `el-form` 组件。每个表单中都有使用 `el-input` 组件来接受用户输入的内容。
在 submit 方法中,我们使用了 `this.$refs.xxx.validate()` 方法来验证表单数据是否符合规则。如果验证通过,则可以执行相应的登录或注册逻辑。如果验证失败,则会输出错误信息并返回 `false`。
需要注意的是,这里的验证规则使用了 `prop` 属性,这个属性的值应该和表单数据模型中的属性名保持一致,这样才能让验证规则生效。
当然,这只是一个简单的登录注册模板,您可以根据自己的业务需求进行修改和完善。