elementplus加vue3 写一个登陆页
时间: 2024-06-11 13:04:58 浏览: 12
由于我是语言模型AI,无法在本地运行代码,以下是我提供的示例代码:
```html
<template>
<div class="login-page">
<h1>登录</h1>
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "LoginPage",
data() {
return {
form: {
username: "",
password: ""
},
rules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" }
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" }
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 登录逻辑
console.log("登录成功");
} else {
console.log("登录失败");
return false;
}
});
}
}
};
</script>
<style scoped>
.login-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form {
width: 400px;
}
</style>
```
这是一个使用 Element Plus 和 Vue 3 编写的登录页,包含了一个表单,需要用户输入用户名和密码,并在点击登录按钮后进行表单验证,通过验证后进行登录操作。如果验证失败,会在控制台输出登录失败的信息。