vue实现滑动拼图验证

一、安装插件

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

二、main.js引入

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

Vue.use(SlideVerify)

三、组件中使用

js

return {
    flag: false,
}
methods: {
    // 拼图成功
    onSuccess (){
      this.getLogin();//登录
      alert(拼图成功);
    },
    // 拼图失败
    onFail (){
       alert(拼图失败);
    },
    // 拼图刷新
    onRefresh (){
      alert(拼图刷新);
    },
    // 登录请求接口
    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
        }
      })
    }
}

滑动拼图验证