elementui写一个登陆页面
时间: 2023-10-18 17:45:01 浏览: 94
elementUI前端CRUD页面
当然可以!以下是一个使用 Element UI 创建的简单登录页面示例:
```html
<template>
<div class="login-container">
<el-form ref="loginForm" :model="loginForm" class="login-form">
<h3 class="login-title">用户登录</h3>
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item 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>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
}
};
},
methods: {
login() {
// 在这里处理登录逻辑
console.log('用户名:', this.loginForm.username);
console.log('密码:', this.loginForm.password);
}
}
};
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form {
width: 400px;
}
.login-title {
text-align: center;
margin-bottom: 20px;
}
</style>
```
在这个示例中,我们使用了 Element UI 的表单组件(`el-form`、`el-input`、`el-button`)来创建一个登录页面。用户可以输入用户名和密码,并点击登录按钮触发 `login` 方法。你可以在 `login` 方法中处理登录逻辑,例如与后端进行验证等。
请注意,这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望对你有所帮助!如果有任何问题,请随时向我提问。
阅读全文