用vue3+elementplus+less写一个登陆注册表单。登录表单包含用户名和密码。注册表单包含用户名,密码,确认密码,所在学院,手机号,邮箱。用less美化表单
时间: 2023-03-20 19:00:31 浏览: 83
以下是一个使用Vue3、Element Plus和Less编写的登录注册表单的示例代码。此表单包括一个登录表单和一个注册表单。登录表单包含用户名和密码输入框,注册表单包含用户名、密码、确认密码、所在学院、手机号和邮箱输入框。同时,使用Less为表单添加样式。
```vue
<template>
<div class="form-container">
<el-tabs v-model="activeTab" type="border-card">
<el-tab-pane label="登录" name="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" placeholder="请输入密码" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="注册" name="register">
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="registerForm.password" placeholder="请输入密码" show-password></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="registerForm.confirmPassword" placeholder="请再次输入密码" show-password></el-input>
</el-form-item>
<el-form-item label="所在学院" prop="college">
<el-input v-model="registerForm.college" placeholder="请输入所在学院"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="registerForm.mobile" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register">注册</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElButton, ElTabs, ElTabPane } from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import './form.less'
export default {
components: {
ElForm,
ElFormItem,
ElInput,
ElButton,
ElTabs,
ElTabPane
},
setup() {
const activeTab = ref('login')
const loginForm = ref({
username: '',
password: ''
})
const registerForm = ref({
username: '',
password: '',
confirmPassword: '',
college: '',
mobile: '',
email: ''
})
const login