# vue3-captcha

**Repository Path**: coderbase/vue3-captcha

## Basic Information

- **Project Name**: vue3-captcha
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-06
- **Last Updated**: 2022-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# About

A canvas captcha built in Vue3 with TypeScript

# Install
```js
npm i -S vue3-captcha
````

# Use
```js
<script setup lang="ts">
import {ref} from "vue"
import Captcha,{CaptchaInstance}  from 'vue3-captcha';
let value=ref('')
let refCode=ref<CaptchaInstance>(null)
const handleCheck=()=>{
  if(refCode.value?.check(value.value)){
    console.log("check success")
  }
}

</script>

<template>
 <Captcha ref="refCode" />
 <input v-model="value">
 <button @click="handleCheck">校验</button>
</template>
```

# Props
|  attr | type | default |  remark |
|-------|------|---------|---------|
| width | Number\|String |120|  width|
| height | Number\|String |40|  height|
| borderColor | String |rgba(0,0,0,0.1)|  border-color|
| bgColor | String |#ffffff|  background-color|
| clickRefresh | Boolean |true|  click refresh|
| failRefresh | Boolean |false|  verification failed, refresh|
# Methods
|  method  | params | return | remark |
|----------|--------|--------|--------|
| refresh  |        | void   | refresh |
| check    | value  | true/false |verification value|