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

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

使用方式

1import {SliderCaptcha} from 'gobestsoft-component-slider-captcha'
2import "gobestsoft-component-slider-captcha/dist/gobestsoft-component-slider-captcha.cjs.development.css";
3
4<SliderCaptcha
5   request={request}
6   onSuccess={async(params)=>{
7        {/* 接口调用，以返回值用res接收为例*/}
8        if(res === true){
9          return Promise.resolve(); //验证成功
10        }else{
11          return Promise.reject(); //验证失败
12        }
13    }}
14/>

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

1  type request = ()=>Promise<{
2    result:{
3      id:string;//图片的id
4      captcha:{
5        backgroundImageWidth: number; //背景图宽度
6        backgroundImageHeight: number; //背景图高度
7        templateImageWidth: number; // 滑块图宽度
8        templateImageHeight: number; // 滑块图高度
9        backgroundImage: string; // 背景图地址
10        templateImage: string; // 滑块图地址
11      }
12    }
13   }>

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

ts类型结构为：

1type params ={
2  id:string; //图片id
3  captchaTrack: {
4    bgImageWidth: number;
5    bgImageHeight: number;
6    trackList: {
7        x: number;
8        y: number;
9        type: "move" | "up" | "down";
10        t: number;
11    }[];
12    endSlidingTime: string;
13    startSlidingTime: string;
14  };
15}

`

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

补充说明

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