element ui绘制表单登录功能页面
时间: 2023-07-10 18:35:36 浏览: 57
你可以参考以下代码来使用 Element UI 绘制一个表单登录页面:
```html
<template>
<div class="login-container">
<el-form ref="form" :model="form" :rules="rules" class="login-form">
<h1 class="login-title">登录</h1>
<el-form-item prop="username">
<el-input type="text" v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form.password" placeholder="请输入密码"></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 {
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('登录成功')
}
})
}
}
}
</script>
<style>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form {
width: 400px;
}
.login-title {
text-align: center;
margin-bottom: 30px;
font-size: 24px;
}
</style>
```
在这个例子中,我们使用了 `el-form` 和 `el-form-item` 组件来绘制表单,使用了 `el-input` 组件来输入用户名和密码。我们在 `data` 中定义了一个 `form` 对象来保存表单数据,定义了一个 `rules` 对象来设置表单验证规则。在 `methods` 中,我们定义了一个 `submitForm` 函数来提交表单,使用了 `validate` 方法来验证表单数据是否合法。如果表单验证通过,我们就可以执行登录操作了。
你可以根据自己的需要来修改样式和表单验证规则。