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 |