Go Captcha
The Behavior Captcha For The Javascript
> English | [中文](README_zh.md)
⭐️ If it helps you, please give a star.
## Install Module
```shell
yarn add go-captcha-jslib
# or
npm install go-captcha-jslib
# or
pnpm install go-captcha-jslib
```
### Import Module
``` javascript
// Import css，Need css-loader processer
import "go-captcha-jslib/dist/gocaptcha.global.css"
// Import Module
import GoCaptcha from "go-captcha-jslib";
console.log(GoCaptcha)
// OR
const GoCaptcha = require('go-captcha-jslib')
console.log(GoCaptcha)
```
## Browser Install
#### Bower Tool
```shell
bower install wenlng/go-captcha-jslib --save
```
```html
```
#### CDN Import
```html
```
## Click Mode
```html
```
```ts
// config = {}
interface ClickConfig {
width?: number;
height?: number;
thumbWidth?: number;
thumbHeight?: number;
verticalPadding?: number;
horizontalPadding?: number;
showTheme?: boolean;
title?: string;
buttonText?: string;
iconSize?: number;
dotSize?: number;
}
// data = {}
interface ClickData {
image: string;
thumb: string;
}
// events = {}
interface ClickEvents {
click?: (x: number, y: number) => void;
refresh?: () => void;
close?: () => void;
confirm?: (dots: Array, reset:() => void) => boolean;
}
// instance methods
interface ClickInstanceMethods {
setConfig: (config: ClickConfig) => void,
setData: (data: ClickData) => void,
setEvents: (events: ClickEvents) => void,
mount: (el: HTMLElement) => void,
destroy: () => void,
reset: () => void,
clear: () => void,
refresh: () => void,
close: () => void,
}
```
## Slide Mode
```html
```
```ts
// config = {}
interface SlideConfig {
width?: number;
height?: number;
thumbWidth?: number;
thumbHeight?: number;
verticalPadding?: number;
horizontalPadding?: number;
showTheme?: boolean;
title?: string;
iconSize?: number;
scope ?: boolean;
}
// data = {}
interface SlideData {
thumbX: number;
thumbY: number;
thumbWidth: number;
thumbHeight: number;
image: string;
thumb: string;
}
// events = {}
interface SlideEvents {
move?: (x: number, y: number) => void;
refresh?: () => void;
close?: () => void;
confirm?: (point: SlidePoint, reset:() => void) => boolean;
}
// instance methods
interface SlideInstanceMethods {
setConfig: (config: SlideConfig) => void,
setData: (data: SlideData) => void,
setEvents: (events: SlideEvents) => void,
mount: (el: HTMLElement) => void,
destroy: () => void,
reset: () => void,
clear: () => void,
refresh: () => void,
close: () => void,
}
```
## Drag-And-Drop Mode
```html
```
```ts
// config = {}
interface SlideRegionConfig {
width?: number;
height?: number;
thumbWidth?: number;
thumbHeight?: number;
verticalPadding?: number;
horizontalPadding?: number;
showTheme?: boolean;
title?: string;
iconSize?: number;
scope ?: boolean;
}
// data = {}
interface SlideRegionData {
thumbX: number;
thumbY: number;
thumbWidth: number;
thumbHeight: number;
image: string;
thumb: string;
}
// events = {}
interface SlideRegionEvents {
move?: (x: number, y: number) => void;
refresh?: () => void;
close?: () => void;
confirm?: (point: SlideRegionPoint, reset:() => void) => boolean;
}
// instance methods
interface SlideRegionInstanceMethods {
setConfig: (config: SlideRegionConfig) => void,
setData: (data: SlideRegionData) => void,
setEvents: (events: SlideRegionEvents) => void,
mount: (el: HTMLElement) => void,
destroy: () => void,
reset: () => void,
clear: () => void,
refresh: () => void,
close: () => void,
}
```
## Rotation Mode
```html
```
```ts
// config = {}
interface RotateConfig {
width?: number;
height?: number;
thumbWidth?: number;
thumbHeight?: number;
verticalPadding?: number;
horizontalPadding?: number;
showTheme?: boolean;
title?: string;
iconSize?: number;
scope ?: boolean;
}
// data = {}
interface RotateData {
angle: number;
image: string;
thumb: string;
}
// events = {}
interface RotateEvents {
rotate?: (angle: number) => void;
refresh?: () => void;
close?: () => void;
confirm?: (angle: number, reset:() => void) => boolean;
}
// instance methods
interface ClickInstanceMethods {
setConfig: (config: ClickConfig) => void,
setData: (data: ClickData) => void,
setEvents: (events: ClickEvents) => void,
mount: (el: HTMLElement) => void,
destroy: () => void,
reset: () => void,
clear: () => void,
refresh: () => void,
close: () => void,
}
```
## Button
```html
```
```ts
export interface ButtonConfig {
width?: number;
height?: number;
verticalPadding?: number;
horizontalPadding?: number;
}
interface ButtonState {
config?: CaptchaConfig;
disabled?: boolean;
type?: "default" | "warn" | "error" | "success";
title?: string;
clickEvent?: ()=>void;
}
// instance methods
interface ButtonInstanceMethods {
setConfig: (config: ButtonConfig) => void,
setState: (data: ButtonState) => void,
mount: (el: HTMLElement) => void,
destroy: () => void,
}
```