基于vue3 + elementPlus生成登录表单,包含账户密码
时间: 2024-05-10 17:21:04 浏览: 6
以下是基于Vue3和ElementPlus生成的登录表单,包含账户和密码字段:
```
<template>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form">
<el-form-item label="账户" prop="username">
<el-input v-model.trim="loginForm.username" placeholder="请输入账户"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model.trim="loginForm.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { reactive } from 'vue'
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'
export default {
components: {
ElForm,
ElFormItem,
ElInput,
ElButton
},
setup() {
const loginForm = reactive({
username: '',
password: ''
})
const loginRules = {
username: [
{ required: true, message: '请输入账户', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
const submitForm = () => {
const form = ref.value.loginForm
form.validate(valid => {
if (valid) {
// 提交表单操作
} else {
return false
}
})
}
return {
loginForm,
loginRules,
submitForm
}
}
}
</script>
```
该表单使用了ElementPlus库提供的组件,包括ElForm、ElFormItem、ElInput和ElButton,同时使用了Vue3的reactive函数来创建响应式的数据对象loginForm,以及使用了表单验证规则loginRules和提交表单操作submitForm。在模板中,通过v-model指令将表单输入框的值绑定到loginForm对象的属性上,通过@click指令绑定提交表单操作。在脚本中,通过setup函数创建了loginForm、loginRules和submitForm变量,并通过return关键字将这些变量暴露给模板使用。在submitForm函数中,使用了ElForm组件提供的validate方法对表单进行验证,通过valid参数判断表单是否验证通过,如果通过则执行提交表单操作,否则返回false。