当前位置：首页 > VUE

vue实现弹出登录注册

2026-02-23 20:03:56VUE

Vue 实现弹出登录注册功能

使用 Vue 组件和 v-show/v-if 控制显示

创建一个独立的登录注册组件，通过 v-show 或 v-if 控制其显示隐藏。在父组件中定义 showLogin 状态，通过按钮触发改变状态。

<!-- LoginRegister.vue -->
<template>
  <div class="modal" v-show="show">
    <div class="modal-content">
      <button @click="close">×</button>
      <!-- 登录表单内容 -->
      <form @submit.prevent="handleLogin">
        <input v-model="loginForm.username" placeholder="用户名">
        <input v-model="loginForm.password" type="password" placeholder="密码">
        <button type="submit">登录</button>
      </form>
      <!-- 注册表单内容 -->
      <form @submit.prevent="handleRegister" v-show="showRegister">
        <input v-model="registerForm.username" placeholder="用户名">
        <input v-model="registerForm.email" placeholder="邮箱">
        <input v-model="registerForm.password" type="password" placeholder="密码">
        <button type="submit">注册</button>
      </form>
      <a href="#" @click="toggleForm">切换到{{ showRegister ? '登录' : '注册' }}</a>
    </div>
  </div>
</template>

<script>
export default {
  props: ['show'],
  data() {
    return {
      showRegister: false,
      loginForm: { username: '', password: '' },
      registerForm: { username: '', email: '', password: '' }
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    toggleForm() {
      this.showRegister = !this.showRegister
    },
    handleLogin() {
      // 处理登录逻辑
    },
    handleRegister() {
      // 处理注册逻辑
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

在父组件中使用

<!-- App.vue -->
<template>
  <div>
    <button @click="showLogin = true">登录/注册</button>
    <LoginRegister :show="showLogin" @close="showLogin = false" />
  </div>
</template>

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

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

使用 Vue 插件实现

对于更复杂的场景，可以使用现成的 UI 库或插件：

Element UI 的 Dialog 组件
Vuetify 的 Dialog 组件
vue-js-modal 插件

以 vue-js-modal 为例：

安装插件：

npm install vue-js-modal

使用方式：

// main.js
import VModal from 'vue-js-modal'
Vue.use(VModal)

// 组件中
<template>
  <button @click="showModal = true">打开模态框</button>
  <modal name="login-register" :adaptive="true" height="auto">
    <!-- 登录注册表单内容 -->
  </modal>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  },
  watch: {
    showModal(val) {
      val ? this.$modal.show('login-register') : this.$modal.hide('login-register')
    }
  }
}
</script>

实现表单验证

可以结合 Vuelidate 或 VeeValidate 实现表单验证：

// 使用 Vuelidate 示例
import { required, email, minLength } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      loginForm: { username: '', password: '' }
    }
  },
  validations: {
    loginForm: {
      username: { required },
      password: { required, minLength: minLength(6) }
    }
  },
  methods: {
    handleLogin() {
      this.$v.loginForm.$touch()
      if (!this.$v.loginForm.$invalid) {
        // 提交表单
      }
    }
  }
}

响应式设计优化

为适应不同屏幕尺寸，可以添加响应式样式：

@media (max-width: 768px) {
  .modal-content {
    width: 90%;
    margin: 0 auto;
  }
}

动画效果

添加过渡动画提升用户体验：

vue实现弹出登录注册

<transition name="fade">
  <div class="modal" v-show="show">
    <!-- 内容 -->
  </div>
</transition>

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