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(自定义关闭按钮，添加变量控制弹窗显隐)
<!-- 拼图验证码 -->
<div v-show="flag" class="testCode">
<p class="closeBtn"><i class="el-icon-close" @click="flag=!flag"></i></p>
<slide-verify
:l="42"
:r="20"
:w="362"
:h="140"
slider-text="向右滑动"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
:style="{width:'362px'}"
class="slide-box"
ref="slideBlock"
v-show="flag"
></slide-verify>
</div>js
return {
msg: '',
flag: false,
}
methods: {
// 拼图成功
onSuccess (){
this.getLogin()
},
// 拼图失败
onFail (){
this.msg = ''
},
// 拼图刷新
onRefresh (){
this.msg = ''
},
// 登录请求接口
getLogin () {
const loginData = {
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
}
})
}
}四、效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。