vue-captcha-code-alpha
install
2,255
| Install | |
|---|---|
npm install vue-captcha-code-alpha |
|
| Latest Version: | 0.3.2 |
| Vue: | 3 |
| Last Updated: | Jun 9, 2025 |
| Links: | GitHub · npm |
Maintainer: amberlin10706
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 |
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.3.2 | ^3 | ||
| 0.3.1 | ^3 | ||
| 0.3.0 | ^3 | ||
| 0.2.6 | ^3 |