vue实现弹出登录注册

Vue 实现弹出登录注册

使用组件与 v-model 控制显示

创建一个独立的 LoginRegisterModal.vue 组件，通过 v-model 控制弹窗显示状态。父组件通过 v-model 绑定布尔值控制弹窗显隐。

<!-- LoginRegisterModal.vue -->
<template>
  <div class="modal" v-if="modelValue">
    <div class="modal-content">
      <button @click="$emit('update:modelValue', false)">关闭</button>
      <!-- 登录/注册表单内容 -->
    </div>
  </div>
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

父组件调用方式：

<template>
  <button @click="showModal = true">登录/注册</button>
  <LoginRegisterModal v-model="showModal" />
</template>

<script>
import LoginRegisterModal from './LoginRegisterModal.vue'

export default {
  components: { LoginRegisterModal },
  data() {
    return { showModal: false }
  }
}
</script>

表单切换与验证

在弹窗内实现登录与注册表单的切换，通常通过选项卡或按钮切换。结合 Vue 的响应式数据和验证库（如 VeeValidate）实现表单验证。

<template>
  <div class="tabs">
    <button :class="{ active: isLogin }" @click="isLogin = true">登录</button>
    <button :class="{ active: !isLogin }" @click="isLogin = false">注册</button>
  </div>

  <form @submit.prevent="submitForm">
    <div v-if="isLogin">
      <input v-model="loginForm.email" placeholder="邮箱"/>
      <input v-model="loginForm.password" type="password" placeholder="密码"/>
    </div>
    <div v-else>
      <input v-model="registerForm.name" placeholder="用户名"/>
      <input v-model="registerForm.email" placeholder="邮箱"/>
      <input v-model="registerForm.password" type="password" placeholder="密码"/>
    </div>
    <button type="submit">{{ isLogin ? '登录' : '注册' }}</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      isLogin: true,
      loginForm: { email: '', password: '' },
      registerForm: { name: '', email: '', password: '' }
    }
  },
  methods: {
    submitForm() {
      if (this.isLogin) {
        // 处理登录逻辑
      } else {
        // 处理注册逻辑
      }
    }
  }
}
</script>

动画过渡效果

为弹窗添加 Vue 的过渡动画，提升用户体验。使用 Vue 的 <transition> 组件实现淡入淡出效果。

<template>
  <transition name="fade">
    <div class="modal" v-if="modelValue">
      <!-- 弹窗内容 -->
    </div>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

第三方组件库集成

如需快速实现，可使用现成的 UI 库如 Element UI、Ant Design Vue 或 Vuetify 的对话框组件。

以 Element UI 为例：

<template>
  <el-button @click="dialogVisible = true">登录/注册</el-button>
  <el-dialog v-model="dialogVisible" title="登录/注册">
    <!-- 表单内容 -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return { dialogVisible: false }
  }
}
</script>