vue+elementui 实现登录验证码功能

最终实现效果（点击图片进行切换 及 验证登录）

html

// getCode() 点击调切换图片
// @keyup.enter.native="handleLogin" 回车登录 事件
//loginForm.code 你输入的验证码
 <el-form-item prop="code">
      <el-input
        v-model="loginForm.code"
        auto-complete="off"
        placeholder="验证码"
        style="width: 63%"
        @keyup.enter.native="handleLogin"
      >
        <svg-icon
          slot="prefix"
          icon-class="validCode"
          class="el-input__icon input-icon"
        />
      </el-input>
      <div class="login-code">
        <img :src="codeUrl" @click="getCode" class="login-code-img" />
      </div>
    </el-form-item>

js

// (data:image/gif;base64) 没反就自己拼 
    getCode() { //点击的时候就图片就请求 图片就换了
      getCodeImg().then((res) => {
        if (res.state == 200) {
          this.codeUrl = res.data.img;
          //this.codeUrl = "data:image/gif;base64," + res.data.img; //
        }
        //这边我简单判断了下 根据自己需求 进行判断 catch...啥的
    }
//handleLogin 登录事件就不写了
// 一般来说前端只需要判断验证码是否为空 把 loginForm.code传给后台就行 让他弹就行
//如果后台让你来判断 那就让他把结果返给你 点击登录时候判断和自己输的和他反的时候相等就行 不等就弹框拦截

如下图