一款与后端jar包配合使用的验证码生成并校验的工具。

引用方式： npm i gobestsoft-component-slider-captcha

使用方式

import {SliderCaptcha} from 'gobestsoft-component-slider-captcha'
import "gobestsoft-component-slider-captcha/dist/gobestsoft-component-slider-captcha.cjs.development.css";

<SliderCaptcha
   request={request}
   onSuccess={async(params)=>{
        {/* 接口调用，以返回值用res接收为例*/}
        if(res === true){
          return Promise.resolve(); //验证成功
        }else{
          return Promise.reject(); //验证失败
        }
    }}
/>

如果需要在多处使用该组件，只需在项目主入口引入css即可。 其中reques为请求图片信息的接口方法。要求返回格式为：

  type request = ()=>Promise<{
    result:{
      id:string;//图片的id
      captcha:{
        backgroundImageWidth: number; //背景图宽度
        backgroundImageHeight: number; //背景图高度
        templateImageWidth: number; // 滑块图宽度
        templateImageHeight: number; // 滑块图高度
        backgroundImage: string; // 背景图地址
        templateImage: string; // 滑块图地址
      }
    }
   }>

onSuccess 为滑块拖动结束后的回调，使用方在此时调用对应的业务接口。 函数的参数params包括：图片ID，验证码信息：验证码的轨迹路径、滑动的开始和结束时间，背景的宽高。

ts类型结构为：

type params ={
  id:string; //图片id
  captchaTrack: {
    bgImageWidth: number;
    bgImageHeight: number;
    trackList: {
        x: number;
        y: number;
        type: "move" | "up" | "down";
        t: number;
    }[];
    endSlidingTime: string;
    startSlidingTime: string;
  };
}

`

​ onSuccess的返回值： ​ Promise.resolve() 验证成功 ​ Promise.reject() 验证失败

补充说明

后端jar包使用方式以及vue版本的滑动验证码参考：https://www.npmjs.com/package/slider-captcha-vue