vue实现登录滑动拼图验证 vue实现登录滑动拼图验证

本文实例为大家分享了vue实现登录滑动拼图验证的具体代码，供大家参考，具体内容如下
一、安装插件

npm install --save vue-monoplasty-slide-verify

二、main.js引入

import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼图验证码Vue.use(SlideVerify)

三、组件中使用 html(自定义关闭按钮，添加变量控制弹窗显隐)

【vue实现登录滑动拼图验证】js

return {msg: '',flag: false,}methods: {// 拼图成功onSuccess (){this.getLogin()},// 拼图失败onFail (){this.msg = ''},// 拼图刷新onRefresh (){this.msg = ''},// 登录请求接口getLogin () {const loginData = https://www.it610.com/article/{account:'',phone: this.ruleForm.userName,// Password: sha3.sha3_256(md5(this.ruleForm.password)), // 加密password: this.ruleForm.password,email: '',accountType: 2, // 登录类型手机号checkCode: ''}// 接口userLogin(loginData).then(res => {console.log(res)}).catch(res => {console.log(res)})},// 点击登录校验-拼图出现submitForm (formName) {// 表单校验this.$refs[formName].validate((valid) => {// 验证通过if (valid) {// 拼图出现this.flag = true} else {console.log('error submit!!')return false}})}}

四、效果