vue使用drag-verify实现滑块验证滑块登录

1.需求

客户要求输入账号密码后，点击登录，做一个滑块验证的功能

2.实现

2.1首先在项目中安装drag-verify 下载安装依赖

不知道什么原因，我无法使用npm安装 drag-verify 最终用yarn完成的

npm i vue-drag-verify2 -S

2.2 在main.js中配置使用drag-verify

import dragVerify from 'vue-drag-verify2'
Vue.use(dragVerify)

2.3

</template>
   <el-form>
	// 此处省略账号密码输入框和登录按钮
    <el-form-item v-show="showHk">
      <drag-verify
        style="margin: 0 auto"    // 让滑块保持水平居中
        :width="320"  // 滑块宽度
        ref="dragVerify"  
        handlerBg="#8ec6e9"  // 滑块颜色
        :isPassing.sync="isPassing"  //  滑块状态参数名
        text="请按住滑块拖动以完成登录"   // 滑块内提示文字
        successText="验证通过"  // 滑块完成提示语
        handlerIcon="el-icon-d-arrow-right"  
        successIcon="el-icon-circle-check"
        @passcallback="passcallback"  // 滑块完成函数  多数用了调用登录接口
      >
        <i v-show="!isPassing" slot="textBefore" class="el-icon-lock"></i>
      </drag-verify>
    </el-form-item>
    
  </el-form>
</template>

<script>
  export default {
    data(){
	  return{
	    showHk: false, // 是否展示滑块  点击登录按钮是 设置为true 同时隐藏登录按钮
        isPassing: false,  // 滑块状态
	  }
	}
	methods:{
	  // 滑块完成函数
      passcallback() {
         this.$refs.loginForm.validate((valid) => {
         if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "登录中,请稍后。。。",
            spinner: "el-icon-loading",
          });
          // console.log(this.loginForm, '22');
          this.$store
            .dispatch("LoginByUsername", this.loginForm)
            .then(() => {
              // 登录成功 直接进入系统即可 
              this.$router.push({ path: this.tagWel.value });
              loading.close();
            })
            .catch(() => {
              // 登录失败 
              // 先执行滑块重置
              this.$refs.dragVerify.reset();
              // 把滑块隐藏  登录按钮显示
              this.showHk = false;
              // 把滑块完成状态修改为未完成
              this.isPassing = false;
              loading.close();
              this.refreshCode();
            });
        }
      });
      },
	}
}
</script>

3.提示-仅提供思路 代码太多 懒得粘贴 而且实现思路不一

3.1 短信验证码登录：

1. 点击发送验证弹出滑块 记得做手机号合法校验
2. 滑块完成后隐藏滑块 记得做发送短信验证码倒计时 不允许点击
3. 第2步概率出现虽然设置了disabled：true 但是还可能点击倒计时的时候，触发滑块显示，记得做如果发送按钮在倒计时，不显示滑块
4. 验证码倒计时结束需要重置滑块，设置滑块状态等等

文档 来自