go-captcha-uni-beta/readme.md

验证码，UniApp 验证码，GoCaptcha 验证码，行为验证码，点选验证码，滑动验证码，旋转验证码，拼图滑块验证码，拼图拖放验证码，图像旋转验证码，点击验证码

<div align="center">
<img width="120" style="padding-top: 50px; margin: 0;" src="https://github.com/wenlng/git-assets/blob/master/go-captcha/gocaptcha_logo.svg?raw=true"/>
<h1 style="margin: 0; padding: 0">Go Captcha</h1>
<p>UniApp 行为验证码</p>

<a href="https://github.com/wenlng/go-captcha-uni/releases"><img src="https://img.shields.io/github/v/release/wenlng/go-captcha-uni.svg"/></a>
<a href="https://www.npmjs.com/package/go-captcha-uni"><img src="https://img.shields.io/npm/v/go-captcha-uni"/></a>
<a href="https://github.com/wenlng/go-captcha-uni/blob/LICENSE"><img src="https://img.shields.io/badge/License-MIT-green.svg"/></a>
<a href="https://github.com/wenlng/go-captcha-uni"><img src="https://img.shields.io/github/stars/wenlng/go-captcha-uni.svg"/></a>
<a href="https://github.com/wenlng/go-captcha-uni"><img src="https://img.shields.io/github/last-commit/wenlng/go-captcha-uni.svg"/></a>

</div>

<br/>

> [English](README.md) | 中文

<br/>

<p style="text-align: center"> ⭐️ 如果能帮助到你，请随手给点一个star</p>
<p style="text-align: center">QQ交流群：178498936</p>

<img src="https://github.com/wenlng/git-assets/blob/master/go-captcha/go-captcha-v2.jpg?raw=true" alt="Poster">

<br/>

<hr/>
<br/>

## 链接索引

| 项目名称                                                               | 说明                                  |
|--------------------------------------------------------------------|-------------------------------------|
| [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、小程序、快应用等  |
| ...                                                                |                                     |

<br/>


## 安装方式
#### 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
<template>
  <go-captcha-uni  type="click"
                   :data="clickCaptData"
                   :events="clickCaptEvents"
                   :config="clickCaptConfig"
                   :theme="clickThemeColor" />
</template>
```

* 采用 npm/yarn/pnpm/... 等依赖工具方式安装，需要 Import 导入。

```vue
<template>
  <go-captcha-uni  type="click"
                   :data="clickCaptData"
                   :events="clickCaptEvents"
                   :config="clickCaptConfig"
                   :theme="clickThemeColor" />
</template>

<script>
import GoCaptchaUni from 'go-captcha-uni'
</script>
```


## 点选式

```vue
<go-captcha-uni
    type="click"
    :config="{}"
    :theme="{}"
    :data="{}"
    :events="{}"
    ref="domRef"
/>

<script>
// call methods
const domRef = ref(null)
domRef.value.clear()
domRef.value.refresh()
</script>
```


```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<ClickDot>, 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
<go-captcha-uni
    type="slide"
    :config="{}"
    :theme="{}"
    :data="{}"
    :events="{}"
    ref="domRef"
/>

<script>
// call methods
const domRef = ref(null)
domRef.value.clear()
domRef.value.refresh()
</script>
```


```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
<go-captcha-uni
    type="drag"
    :config="{}"
    :theme="{}"
    :data="{}"
    :events="{}"
    ref="domRef"
/>

<script>
// call methods
const domRef = ref(null)
domRef.value.clear()
domRef.value.refresh()
</script>
```


```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
<go-captcha-uni
    type="rotate"
    :config="{}"
    :theme="{}"
    :data="{}"
    :events="{}"
    ref="domRef"
/>

<script>
// call methods
const domRef = ref(null)
domRef.value.clear()
domRef.value.refresh()
</script>
```


```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
<go-captcha-uni
    type="button"
    :config="{}"
    :theme="{}"
    :data="{}"
    :events="{}"
/>
```


```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?: () => {}
}

```

## 👍 赞助一下

<div>
<a href="http://gocaptcha.wencodes.com/sponsor/" target="_blank">http://gocaptcha.wencodes.com/sponsor/</a>
</div>
<br/>