> [English](README.md) | 中文
⭐️ 如果能帮助到你，请随手给点一个star
QQ交流群：178498936
## 链接索引
| 项目名称 | 说明 |
|--------------------------------------------------------------------|-------------------------------------|
| [document](http://gocaptcha.wencodes.com) | GoCaptcha 文档 |
| [online demo](http://gocaptcha.wencodes.com/demo/) | GoCaptcha 在线演示 |
| [go-captcha-example](https://github.com/wenlng/go-captcha-example) | Golang + 前端 + APP实例 |
| [go-captcha-assets](https://github.com/wenlng/go-captcha-assets) | Golang 内嵌素材资源 |
| [go-captcha](https://github.com/wenlng/go-captcha) | Golang 验证码 |
| [go-captcha-jslib](https://github.com/wenlng/go-captcha-jslib) | Javascript 验证码 |
| [go-captcha-vue](https://github.com/wenlng/go-captcha-vue) | Vue 验证码 |
| [go-captcha-react](https://github.com/wenlng/go-captcha-react) | React 验证码 |
| [go-captcha-angular](https://github.com/wenlng/go-captcha-angular) | Angular 验证码 |
| [go-captcha-svelte](https://github.com/wenlng/go-captcha-svelte) | Svelte 验证码 |
| [go-captcha-solid](https://github.com/wenlng/go-captcha-solid) | Solid 验证码 |
| [go-captcha-uni](https://github.com/wenlng/go-captcha-uni) | UniApp 验证码，兼容 Android、IOS、小程序、快应用等 |
| ... | |
## 安装方式
#### 1、使用HBuilderX导入插件
* [使用HBuilderX导入插件](https://ext.dcloud.net.cn/plugin?name=go-captcha-uni)
#### 2、下载插件ZIP导入插件
* [下载插件ZIP](https://ext.dcloud.net.cn/plugin?name=go-captcha-uni)
#### 3、Node 依赖工具安装
```shell
yarn add go-captcha-uni
# or
npm install go-captcha-uni
# or
pnpm install go-captcha-uni
```
## 使用
* 采用 uni_modules 方式安装，支持 easycom 模式导入组件，可以不用 Import、注册等。
```vue
```
* 采用 npm/yarn/pnpm/... 等依赖工具方式安装，需要 Import 导入。
```vue
```
## 点选式
```vue
```
```ts
// config = {}
interface Config {
width?: number;
height?: number;
thumbWidth?: number;
thumbHeight?: number;
verticalPadding?: number;
horizontalPadding?: number;
showTheme?: boolean;
title?: string;
buttonText?: string;
iconSize?: number;
dotSize?: number;
}
// data = {}
interface Data {
image: string;
thumb: string;
}
// events = {}
interface Events {
click?: (x: number, y: number) => void;
refresh?: () => void;
close?: () => void;
confirm?: (dots: Array, reset:() => void) => boolean;
}
// theme = {}
interface Theme {
textColor?: string; // '#ffffff'
bgColor?: string;
btnColor?: string;
btnDisabledColor?: string;
btnBgColor?: string;
btnBorderColor?: string;
activeColor?: string;
borderColor?: string;
iconColor?: string;
loadingIconColor?: string;
bodyBgColor?: string;
dotColor?: string;
dotBgColor?: string;
dotBorderColor?: string;
}
// export component method
interface ExportMethods {
reset: () => void,
clear: () => void,
refresh: () => void,
close: () => void,
}
```
## 滑动式
```vue
```
```ts
// config = {}
interface Config {
width?: number;
height?: number;
thumbWidth?: number;
thumbHeight?: number;
verticalPadding?: number;
horizontalPadding?: number;
showTheme?: boolean;
title?: string;
iconSize?: number;
scope ?: boolean;
}
// data = {}
interface Data {
thumbX: number;
thumbY: number;
thumbWidth: number;
thumbHeight: number;
image: string;
thumb: string;
}
// events = {}
interface Events {
move?: (x: number, y: number) => void;
refresh?: () => void;
close?: () => void;
confirm?: (point: SlidePoint, reset:() => void) => boolean;
}
// theme = {}
interface Theme {
textColor?: string; // '#ffffff'
bgColor?: string;
borderColor?: string;
iconColor?: string;
dragBarColor?: string;
dragBgColor?: string;
dragIconColor?: string;
loadingIconColor?: string;
bodyBgColor?: string;
}
// export component method
interface ExportMethods {
reset: () => void,
clear: () => void,
refresh: () => void,
close: () => void,
}
```
## 拖拽式
```vue
```
```ts
// config = {}
interface Config {
width?: number;
height?: number;
thumbWidth?: number;
thumbHeight?: number;
verticalPadding?: number;
horizontalPadding?: number;
showTheme?: boolean;
title?: string;
iconSize?: number;
scope ?: boolean;
}
// data = {}
interface Data {
thumbX: number;
thumbY: number;
thumbWidth: number;
thumbHeight: number;
image: string;
thumb: string;
}
// events = {}
interface Events {
move?: (x: number, y: number) => void;
refresh?: () => void;
close?: () => void;
confirm?: (point: SlideRegionPoint, reset:() => void) => boolean;
}
// theme = {}
interface Theme {
textColor?: string; // '#ffffff'
bgColor?: string;
borderColor?: string;
iconColor?: string;
loadingIconColor?: string;
bodyBgColor?: string;
}
// export component method
interface ExportMethods {
reset: () => void,
clear: () => void,
refresh: () => void,
close: () => void,
}
```
## 旋转式
```vue
```
```ts
// config = {}
interface Config {
width?: number;
height?: number;
thumbWidth?: number;
thumbHeight?: number;
verticalPadding?: number;
horizontalPadding?: number;
showTheme?: boolean;
title?: string;
iconSize?: number;
scope ?: boolean;
}
// data = {}
interface Data {
angle: number;
image: string;
thumb: string;
}
// events = {}
interface Events {
rotate?: (angle: number) => void;
refresh?: () => void;
close?: () => void;
confirm?: (angle: number, reset:() => void) => boolean;
}
// theme = {}
interface Theme {
textColor?: string; // '#ffffff'
bgColor?: string;
borderColor?: string;
iconColor?: string;
dragBarColor?: string;
dragBgColor?: string;
dragIconColor?: string;
roundColor?: string;
loadingIconColor?: string;
bodyBgColor?: string;
}
// export component method
interface ExportMethods {
reset: () => void,
clear: () => void,
refresh: () => void,
close: () => void,
}
```
## 按钮
```vue
```
```ts
// config = {}
interface Config {
width?: number;
height?: number;
verticalPadding?: number;
horizontalPadding?: number;
}
// data = {}
interface Data {
disabled?: boolean;
type?: "default" | "warn" | "error" | "success"
}
// theme = {}
interface Theme {
textColor?: string; // '#ffffff'
bgColor?: string;
btnColor?: string;
btnDisabledColor?: string;
btnBgColor?: string;
btnBorderColor?: string;
activeColor?: string;
borderColor?: string;
iconColor?: string;
loadingIconColor?: string;
bodyBgColor?: string;
dotColor?: string;
dotBgColor?: string;
dotBorderColor?: string;
}
// events = {}
interface Events {
click?: () => {}
}
```
## 👍 赞助一下
