vue实现登录滑动拼图验证

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

一、安装插件

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

二、main.js引入

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

Vue.use(SlideVerify)

三、组件中使用

html(自定义关闭按钮，添加变量控制弹窗显隐)

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

四、效果

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