go-captcha-jslib
v1.0.9TypeScript
GoCaptcha for Javascript, which implements click mode, slider mode, drag-drop mode and rotation mode.
go-captcha-jsgo-captcha-javascriptgo-captchagocaptchacaptcha-jscaptcha-javascriptjs-captchajavascript-captchacaptsgocapts
0/weekUpdated 11 months agoMITUnpacked: 180.7 KB
Published by Awen
npm install go-captcha-jslib
Go Captcha
The Behavior Captcha For The Javascript
> English | 中文
⭐️ 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`$3
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
`
tsexport 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,
}
``