vue elementui实现登录

1. 安装 ElementUI

npm install element-ui --save

2. 引入 ElementUI

在 main.js 文件中引入 ElementUI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 创建登录表单

使用 ElementUI 的 Form 表单组件和 Input 输入框组件创建登录表单，代码如下：

<template>
  <div>
    <h1>登录</h1>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 表单验证通过，可以进行登录操作
          console.log('登录成功')
        } else {
          console.log('登录失败')
          return false
        }
      })
    }
  }
}
</script>

在上面的代码中，我们使用了 ElementUI 的 Form 表单组件和 Input 输入框组件，还定义了验证规则和提交表单的方法。

4. 完成登录功能

在 submitForm 方法中，我们可以调用登录接口进行登录操作。在这里，我们只是简单地打印出登录成功或失败的信息。

submitForm(formName) {
  this.$refs[formName].validate(valid => {
    if (valid) {
      // 表单验证通过，可以进行登录操作
      login(this.loginForm.username, this.loginForm.password).then(res => {
        console.log('登录成功')
      }).catch(() => {
        console.log('登录失败')
      })
    } else {
      console.log('登录失败')
      return false
    }
  })
}

在上面的代码中，我们调用了一个名为 login 的函数，该函数接收用户名和密码作为参数，并返回一个 Promise 对象。

function login(username, password) {
  return new Promise((resolve, reject) => {
    // 调用登录接口
    // 成功时调用 resolve()，失败时调用 reject()
  })
}

在实际项目中，我们需要根据后端接口的具体情况来实现登录功能。

完整代码如下：

<template>
  <div>
    <h1>登录</h1>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 表单验证通过，可以进行登录操作
          login(this.loginForm.username, this.loginForm.password).then(res => {
            console.log('登录成功')
          }).catch(() => {
            console.log('登录失败')
          })
        } else {
          console.log('登录失败')
          return false
        }
      })
    }
  }
}

function login(username, password) {
  return new Promise((resolve, reject) => {
    // 调用登录接口
    // 成功时调用 resolve()，失败时调用 reject()
  })
}
</script>