vue-captcha-code-alpha
install
yarn add vue-captcha-code-alpha
for vue3 use

usage
<script setup>
import { CaptchaImage } from 'vue-captcha-code-alpha'
import 'vue-captcha-code-alpha/style.css'
import type { CaptchaImageInstance } from 'vue-captcha-code-alpha'
const captchaRef = ref<CaptchaImageInstance>()
const validate = () => {
captchaRef.value.validate("1234")
}
</script>
<template>
<CaptchaImage ref="captchaRef"/>
</template>
props
| Name |
Type |
Default |
Desp |
| codeLength |
Number |
4 |
length of verification code |
| codeType |
String[] |
["A", "a", "0"] |
type of verification code A [A-Z] / a [a-z] / 0 [0-9] |
| contentWidth |
Number |
120 |
captcha width |
| contentHeight |
Number |
40 |
captcha height |
| fontSizeMin |
Number |
24 |
minimum font size |
| fontSizeMax |
Number |
36 |
maximum font size |
| textColor |
String |
null |
specify text color |
| textColorMin |
Number |
50 |
minimum text color |
| textColorMax |
Number |
160 |
maximum text color |
| textDegMin |
Number |
-30 |
minimum text rotation |
| textDegMax |
Number |
30 |
maximum text rotation |
| backgroundColor |
String |
null |
specify background color |
| backgroundColorMin |
Number |
200 |
minimum background color |
| backgroundColorMax |
Number |
220 |
maximum background color |
| dotCount |
Number |
30 |
specify dot count |
| dotColorMin |
Number |
0 |
minimum dot color |
| dotColorMax |
Number |
255 |
maximum dot color |
| lineCount |
Number |
4 |
specify line count |
| lineColorMin |
Number |
40 |
minimum line color |
| lineColorMax |
Number |
180 |
maximum line color |