vue实现登陆弹窗

实现登录弹窗的基本结构

在Vue中实现登录弹窗通常需要创建一个独立的组件，通过v-model或props控制显示/隐藏状态。以下是基础实现方式：

<template>
  <div class="login-modal" v-if="showModal">
    <div class="modal-content">
      <span class="close" @click="closeModal">&times;</span>
      <h3>用户登录</h3>
      <form @submit.prevent="handleSubmit">
        <input v-model="username" placeholder="用户名" />
        <input v-model="password" type="password" placeholder="密码" />
        <button type="submit">登录</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: Boolean
  },
  data() {
    return {
      username: '',
      password: ''
    }
  },
  computed: {
    showModal: {
      get() { return this.value },
      set(val) { this.$emit('input', val) }
    }
  },
  methods: {
    closeModal() {
      this.showModal = false
    },
    handleSubmit() {
      // 处理登录逻辑
      console.log(this.username, this.password)
      this.closeModal()
    }
  }
}
</script>

<style scoped>
.login-modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
</style>

在父组件中使用

父组件中引入并使用登录弹窗组件：

<template>
  <div>
    <button @click="showLoginModal = true">显示登录窗口</button>
    <LoginModal v-model="showLoginModal" />
  </div>
</template>

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

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

增强功能实现

为登录弹窗添加表单验证和加载状态：

<template>
  <div class="login-modal" v-if="showModal">
    <div class="modal-content">
      <span class="close" @click="closeModal">&times;</span>
      <h3>用户登录</h3>
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <input v-model="form.username" placeholder="用户名" />
          <span class="error" v-if="errors.username">{{ errors.username }}</span>
        </div>
        <div class="form-group">
          <input v-model="form.password" type="password" placeholder="密码" />
          <span class="error" v-if="errors.password">{{ errors.password }}</span>
        </div>
        <button type="submit" :disabled="loading">
          {{ loading ? '登录中...' : '登录' }}
        </button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: Boolean
  },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      errors: {},
      loading: false
    }
  },
  methods: {
    validate() {
      this.errors = {}
      let isValid = true

      if (!this.form.username) {
        this.errors.username = '请输入用户名'
        isValid = false
      }

      if (!this.form.password) {
        this.errors.password = '请输入密码'
        isValid = false
      }

      return isValid
    },
    async handleSubmit() {
      if (!this.validate()) return

      this.loading = true
      try {
        await this.$store.dispatch('user/login', this.form)
        this.closeModal()
      } catch (error) {
        this.errors.form = error.message
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

使用Vuex管理登录状态

结合Vuex实现全局状态管理：

// store/modules/user.js
export default {
  namespaced: true,
  state: {
    token: null,
    userInfo: null
  },
  mutations: {
    SET_TOKEN(state, token) {
      state.token = token
    },
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await api.login(credentials)
      commit('SET_TOKEN', response.token)
      commit('SET_USER_INFO', response.user)
      return response
    }
  }
}

使用第三方UI库快速实现

使用Element UI等组件库可以快速实现：

<template>
  <el-dialog :visible.sync="showModal" title="登录">
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" type="password" placeholder="密码"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="showModal = false">取消</el-button>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 提交表单
        }
      })
    }
  }
}
</script>