elementui login

以下是基于 Element UI 实现登录功能的详细方法，整合了常见实践和官方文档建议：

登录表单组件结构

使用 el-form 组件构建登录表单，需绑定 model 和 rules 实现数据绑定与验证：

<template>
  <el-form :model="loginForm" :rules="rules" ref="loginForm">
    <el-form-item prop="username">
      <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
    </el-form-item>
  </el-form>
</template>

数据与验证规则配置

在 script 部分定义表单数据和验证规则：

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度至少6位', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

表单提交处理

实现表单验证和提交逻辑，包含异步请求处理：

methods: {
  submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        // 使用axios或其他HTTP库发送请求
        axios.post('/api/login', this.loginForm)
          .then(response => {
            // 处理登录成功逻辑
            this.$message.success('登录成功');
            this.$router.push('/dashboard');
          })
          .catch(error => {
            this.$message.error(error.response.data.message);
          });
      } else {
        return false;
      }
    });
  }
}

样式优化建议

通过 Element UI 的布局组件增强视觉效果：

<el-row type="flex" justify="center">
  <el-col :xs="24" :sm="12" :md="8">
    <el-card shadow="always">
      <!-- 表单内容 -->
    </el-card>
  </el-col>
</el-row>

扩展功能实现

添加记住密码和验证码功能：

data() {
  return {
    loginForm: {
      rememberMe: false,
      captcha: ''
    },
    captchaUrl: '/api/captcha?' + Date.now()
  }
},
methods: {
  refreshCaptcha() {
    this.captchaUrl = '/api/captcha?' + Date.now()
  }
}

响应式处理

针对移动端适配调整布局：

@media (max-width: 768px) {
  .el-card {
    margin: 0 10px;
  }
}

以上实现包含表单验证、异步请求、错误处理等完整流程，可根据实际项目需求调整接口路径和业务逻辑。Element UI 的文档组件如 el-message 和 el-loading 可进一步优化用户体验。