本文实例为大家分享了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        }      })    }}

四、效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。