最终实现效果（点击图片进行切换 及 验证登录）
html
// getCode() 点击调切换图片// @keyup.enter.native="handleLogin" 回车登录 事件//loginForm.code 你输入的验证码<el-form-item prop="code"><el-inputv-model="loginForm.code"auto-complete="off"placeholder="验证码"style="width: 63%"@keyup.enter.native="handleLogin"><svg-iconslot="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传给后台就行 让他弹就行//如果后台让你来判断 那就让他把结果返给你 点击登录时候判断和自己输的和他反的时候相等就行 不等就弹框拦截
如下图
