在前端实现这样的滑动验证
1.安装插件
npm i -S vue-puzzle-vcode
2.前端代码
<el-form ref="myForm" :model="formData" :rules="formRules">
<el-form-item prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="formData.password"></el-input>
</el-form-item>
<el-form-item>
<Vcode :show="isShow" @success="onsuccess" @close="close" />
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
<script>
import Vcode from "vue-puzzle-vcode";
export default {
data() {
return {
isShow: true // 验证码模态框是否出现
};
},
components: {
Vcode
},
methods: {
//唤起验证框
submit() {
this.isShow = true;
},
//验证通过后隐藏验证框,调用登录方法
onsuccess(msg) {
this.isShow = false;
this.login();
},
// 点击其他地方关闭验证框
close() {
this.isShow = false;
}
}
};
</script>