ElementUI之登陆+注册

在使用ElementUI进行登录和注册页面的设计时，可以利用Form和Input组件来构建表单，并使用Button组件来提交表单。以下是一个简单的登录和注册页面示例：

<template>
  <el-container>
    <el-main>
      <!-- 登录表单 -->
      <el-form v-if="loginVisible" ref="loginForm" :model="loginForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitLogin">登录</el-button>
          <el-button @click="loginVisible = false; registerVisible = true">注册</el-button>
        </el-form-item>
      </el-form>
      
      <!-- 注册表单 -->
      <el-form v-if="registerVisible" ref="registerForm" :model="registerForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="registerForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitRegister">注册</el-button>
          <el-button @click="registerVisible = false; loginVisible = true">登录</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>
 
<script>
export default {
  data() {
    return {
      loginVisible: true,
      registerVisible: false,
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: '',
        confirmPassword: ''
      }
    };
  },
  methods: {
    submitLogin() {
      // 处理登录逻辑
      console.log('Login with:', this.loginForm);
    },
    submitRegister() {
      // 处理注册逻辑
      console.log('Register with:', this.registerForm);
    }
  }
};
</script>

在这个例子中，我们有一个登录表单和一个注册表单，它们通过v-if来控制显示，并且有切换按钮来在两个表单之间进行切换。提交按钮触发submitLogin和submitRegister方法，这些方法可以包含用户的验证逻辑和发送请求到后端的代码。这个简单的例子展示了如何使用ElementUI的组件来快速构建一个登录和注册页面。