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
        }
      })
    }
}

四、效果

五、没有啦 嘻嘻

最平凡的一天，一切都挺好的