用vue实现登录切换

以下是用 Vue 实现登录切换功能的实现方法：

组件结构设计

创建两个独立的表单组件，分别用于登录和注册。通过 v-if 或 v-show 控制显示状态。

<template>
  <div class="auth-container">
    <LoginForm v-if="isLogin" @switch="toggleForm" />
    <RegisterForm v-else @switch="toggleForm" />
  </div>
</template>

状态管理

使用 Vue 的 data 或 ref (Composition API) 管理当前显示的表单状态。

// Options API
data() {
  return {
    isLogin: true
  }
},
methods: {
  toggleForm() {
    this.isLogin = !this.isLogin;
  }
}

// Composition API
const isLogin = ref(true);
const toggleForm = () => {
  isLogin.value = !isLogin.value;
};

表单组件实现

登录组件示例：

<template>
  <div class="form-wrapper">
    <h3>登录</h3>
    <form @submit.prevent="handleLogin">
      <input v-model="email" type="email" placeholder="邮箱">
      <input v-model="password" type="password" placeholder="密码">
      <button type="submit">登录</button>
    </form>
    <p>还没有账号？<a href="#" @click="$emit('switch')">立即注册</a></p>
  </div>
</template>

注册组件示例：

<template>
  <div class="form-wrapper">
    <h3>注册</h3>
    <form @submit.prevent="handleRegister">
      <input v-model="email" type="email" placeholder="邮箱">
      <input v-model="password" type="password" placeholder="密码">
      <input v-model="confirmPassword" type="password" placeholder="确认密码">
      <button type="submit">注册</button>
    </form>
    <p>已有账号？<a href="#" @click="$emit('switch')">立即登录</a></p>
  </div>
</template>

过渡动画

添加 Vue 过渡效果使切换更平滑：

<transition name="fade" mode="out-in">
  <LoginForm v-if="isLogin" @switch="toggleForm" />
  <RegisterForm v-else @switch="toggleForm" />
</transition>

CSS 过渡样式：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

表单验证

建议使用 Vuelidate 或自定义验证逻辑：

import { required, email, minLength } from 'vuelidate/lib/validators';

validations: {
  email: { required, email },
  password: { required, minLength: minLength(6) }
}

状态持久化

如需保持表单数据，可使用 Vuex 或 Pinia：

// 使用 Pinia 存储表单数据
const useAuthStore = defineStore('auth', {
  state: () => ({
    email: '',
    password: ''
  })
});

响应式设计

确保表单在不同设备上正常显示：

.auth-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

@media (max-width: 768px) {
  .auth-container {
    padding: 10px;
  }
}

以上实现方式可以根据实际项目需求进行调整和扩展。