@ captchafox/ veue (签名)
安装
使用您喜欢的软件包管理器安装库
npm install @captchafox/vue
yarn add @captchafox/vue
pnpm add @captchafox/vue
bun add @captchafox/vue
使用量
<script setup lang="ts">
import { CaptchaFox } from '@captchafox/vue';
</script>
<template>
<CaptchaFox sitekey="sk_11111111000000001111111100000000" />
</template>
(可选)注册整个应用(如. main.ts(中文(简体) )
import { CaptchaFox } from '@captchafox/vue';
import App from './App.vue';
const app = createApp(App)
.component('CaptchaFox', CaptchaFox);
.mount('#app');
道具
| Prop | 类型 | 说明 | 需求 |
|---|---|---|---|
| 站台密钥 | string | 部件的站点密钥 . | ✅ |
| 朗语 | string | 部件应显示的语言 。 默认自动检测它. | |
| 模式 | inline|popup|hidden | 部件要显示的模式 . | |
| 开始 | none|auto|focus | 核查开始时的控制。 默认为 none。 。 。 . | |
| 主题 | light | dark | ThemeDefinition | 部件的主题 。 默认为光. | |
| 无 | string | 随机生成非ce. | |
| i18n (英语) | object | 自定义i18n配置. | |
| 隐藏 | boolean | 隐藏关闭按钮并阻止用户关闭部件模式. | |
| 认证 | function | 在成功核实后,以响应符号调用. | |
| 失败 | function | 在核查失败后打电话. | |
| 错误 | function | 当错误发生时调用 . | |
| 结束 | function | 当挑战结束时召唤. | |
| 关闭 | function | 当挑战结束时打电话来. |
使用验证回调
<script setup lang="ts">
import { CaptchaFox, CAPTCHA_RESPONSE_KEY } from '@captchafox/vue';
const handleVerify = (token: string) => {
// do something with the token here (e.g. submit the form)
const formData = {
// your form data
[CAPTCHA_RESPONSE_KEY]: token
};
};
</script>
<template>
<CaptchaFox sitekey="sk_11111111000000001111111100000000" @verify="handleVerify" />
</template>
使用虚拟模式
<script setup lang="ts">
import { CaptchaFox, CAPTCHA_RESPONSE_KEY } from '@captchafox/vue';
// contains response token after successful verification
const token = ref<string>();
</script>
<template>
<CaptchaFox sitekey="sk_11111111000000001111111100000000" v-model="token" />
<pre>{{ token }}</pre>
</template>
与实例互动
<script setup lang="ts">
import { CAPTCHA_RESPONSE_KEY, CaptchaFox, CaptchaFoxInstance } from '@captchafox/vue';
import { ref } from 'vue';
const captchafox = ref<CaptchaFoxInstance | null>(null);
const triggerAction = async () => {
// execute the captcha
try {
const token = await captchafox.value?.execute();
} catch {
// unsuccessful verification
}
};
</script>
<template>
<CaptchaFox ref="captchafox" sitekey="sk_11111111000000001111111100000000" />
<button @click="triggerAction">Action</button>
</template>
您可以在 GitHub 仓库。 。 。 .