vue實現登錄滑動拼圖驗證

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

import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼圖驗證碼

Vue.use(SlideVerify)

<!-- 拼圖驗證碼 -->
<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>

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