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 | 关闭弹窗 | |