xt-captcha
验证码服务
安装
npm install xt-captcha
模式
共有三种验证方式,滑动拼图、文字验证、和旋转验证。通过 mode 参数来设置,默认不传为滑动。mode 参数详情见下边说明。
使用方法
umd 方式
<script src="https://app.litenews.cn/service2/public/js/captcha/index.js"></script>
<script>
const captcha = createCaptcha({
// 验证回调
onVerify({
error,
result
}) {
// 验证失败 不需要其他额外处理,内部做了失败刷新处理
if (error) {}
// 验证成功
if (result) {
// result.data 返回为验证成功后的凭证
}
},
// 关闭弹窗的回调
onClose(close) {
// close 为字符串 'close'
}
})
captcha.open()
</script>
esm 方式 vue 项目中使用
- vue2 中使用
<script>
import { createCaptcha } from 'xt-captcha'
export default {
name: 'App',
data() {
return {
captcha: null
}
},
mounted() {
this.initCaptcha()
},
methods: {
initCaptcha() {
this.captcha = createCaptcha({
// 验证回调
onVerify({ error, result }) {
// 验证失败 不需要其他额外处理,内部做了失败刷新处理
if (error) {
}
// 验证成功
if (result) {
// result.data 返回为验证成功后的凭证
}
},
// 关闭弹窗的回调
onClose(close) {
// close 为字符串 'close'
}
})
// 显示验证弹窗
this.captcha.open()
}
}
}
</script>
- vue3 中使用
<scripte setup lang="ts">
import { createCaptcha } from 'xt-captcha'
import { ref, onMounted } from 'vue'
const captcha = ref(null)
onMounted(() => {
captcha.value = createCaptcha({
// 验证回调
onVerify({ error, result }) {
// 验证失败 不需要其他额外处理,内部做了失败刷新处理
if (error) {
}
// 验证成功
if (result) {
// result.data 返回为验证成功后的凭证
}
},
// 关闭弹窗的回调
onClose(close) {
// close 为字符串 'close'
}
})
captcha.value.open()
})
</scripte>
Api
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
mode | 验证形式 | 滑动验证'slide',或文字点选'text','rotate'为旋转 | slide |
appid | appid | string | 默认为空,非必填 |
onVerify | 验证回调 | (arg: { error?: string, result?: { data: string }}) => void | |
onClose | 关闭弹窗回调 | (arg: string) => void |
api
方法名 | 说明 | |
---|---|---|
open | 显示弹窗 | |
close | 关闭弹窗 |