拼图滑动 实现自动验证,登录验证按住滑块,拖动完成上方拼图

　　本文主要详细介绍了登录滑动拼图验证的vue实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享vue验证登录滑动拼图的具体代码，供大家参考。具体内容如下

一、安装插件

　　npm安装-保存vue-单成形-幻灯片-验证

二、main.js引入

　　导入幻灯片验证自./node _ modules/vue-mono plasty-slide-verify //puzzle验证码

　　Vue.use(滑动验证)

三、组件中使用

　　Html(自定义关闭按钮并添加变量来控制弹出窗口)

　　！-拼图验证码-

　　div v-show= flag class= test code

　　p class= close BTN I class= El-icon-close @ click= flag=！标志/i/p

　　幻灯片-验证

　　:l=42

　　:r=20

　　:w=362

　　:h=140

　　滑块-text=向右滑动

　　@success=onSuccess

　　@fail=onFail

　　@refresh=onRefresh

　　:style={width:362px}

　　幻灯片盒

　　ref=slideBlock

　　v-show=flag

　　/幻灯片-验证

　　/div

　　射流研究…

　　返回{

　　消息： ，

　　标志：假，

　　}

　　方法：{

　　//拼图成功

　　onSuccess (){

　　this.getLogin()

　　},

　　//拼图失败

　　onFail (){

　　this.msg=

　　},

　　//拼图刷新

　　onRefresh (){

　　this.msg=

　　},

　　//登录请求接口

　　getLogin () {

　　const loginData={

　　帐户： ，

　　电话：this.ruleForm.userName，

　　//密码：sha3 . sha3 _ 256(MD5(this . rule form . password))，//加密

　　密码：this.ruleForm.password，

　　电子邮件： ，

　　AccountType: 2，//登录类型手机号码

　　校验码：“”

　　}

　　//接口

　　用户登录(登录数据)。然后(res={

　　console.log(res)

　　})。catch(res={

　　console.log(res)

　　})

　　},

　　//点击登录检查——谜题出现。

　　submitForm (formName) {

　　//表单验证

　　这个。$ refs[表单名]。验证((有效)={

　　//验证通过

　　如果(有效){

　　//谜题出现

　　this.flag=true

　　}否则{

　　console.log(错误提交！)

　　返回false

　　}

　　})

　　}

　　}

四、效果

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。