el-form、el-form-item和el-input创建的精美登录界面
时间: 2023-10-15 12:04:38 浏览: 46
可以使用 Element UI 组件库来创建精美的登录界面。通过组合使用 `el-form`、`el-form-item` 和 `el-input` 组件,可以轻松地构建一个具有表单验证和美观样式的登录界面。
首先,你需要在你的项目中引入 Element UI 组件库。可以通过 CDN 的方式引入,也可以通过 npm 安装并导入组件。
下面是一个示例代码,演示如何使用这些组件创建一个简单的登录界面:
```html
<template>
<el-form ref="loginForm" :model="loginData" :rules="loginRules" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginData.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginData.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
loginData: {
username: '',
password: ''
},
loginRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
};
},
methods: {
login() {
// 处理登录逻辑
// ...
},
resetForm() {
this.$refs.loginForm.resetFields();
}
}
};
</script>
```
在上面的示例代码中,`el-form` 组件包裹了登录表单,并通过 `ref` 属性绑定了一个名为 "loginForm" 的引用。`el-form-item` 是每个表单项的容器,其中 `label` 属性用于显示表单项的标签,`prop` 属性用于进行表单验证。
`el-input` 组件用于获取用户输入的用户名和密码。通过 `v-model` 指令将输入框的值绑定到 `loginData` 对象的属性上。
`loginRules` 对象定义了表单的验证规则,以确保用户输入的有效性。
登录按钮和重置按钮使用 `el-button` 组件创建,并绑定了相应的点击事件。
通过这样的组合使用,你可以创建一个具有表单验证和美观样式的登录界面。可以根据自己的需求进行进一步的样式定制和功能扩展。