vue-tencent-captcha

腾讯防水墙，验证码组件

usage

 yarn add vue-tencent-captcha

import Captcha from '../packages/Captcha.vue';

export default {
  name: 'app',
  data() {
    return {
      show: true,
      appId: 'tt12345',
      extraBizParam: {
        bizState: 'hhhhh',
      },
    };
  },
  components: {
    Captcha,
  },
  mounted() {
    setTimeout(() => {
      // this.$root.captcha.show();
    }, 5000);
  },
  watch: {
    show(newVal) {
      if (!newVal) {
        this.$root.captcha.destroy();
      }
    },
  },
  methods: {
    captchaCallback(res) {
      console.log(res);
    },
  },
};

<template v-if="show">
  <Captcha :appId="appId" :callback="captchaCallback" :extraBizParam="extraBizParam">
    <button>单击验证</button>
  </Captcha>
</template>

属性

成员	说明	类型	默认值
appId	appId	String	无
callback	回调函数	function	无
extraBizParam	options,	Object	null

配置参数

options提供以下配置参数：

配置名	值类型	说明
bizState	Any	自定义透传参数，业务可用该字段传递少量数据，该字段的内容会被带入callback回调的对象中

extraBizParam: {
    bizState: 'hhh'
}

回调内容

字段名	值类型	说明
ret	Int	验证结果，0-验证成功，2-用户主动关闭验证码
ticket	String	验证成功的票据，当且仅当ret=0时ticket有值
appid	String	场景Id
bizState	Any	自定义透传参数

 // 回调
cb(res) {
  console.log(res);
}

示例

 <tencentCaptcha appid="xxx" :callback="cb" :extraBizParam="extraBizParam">
  单击验证
</tencentCaptcha>

实例方法

 // 隐藏验证码
this.$root.captcha.destroy(); 
// 显示验证码
this.$root.captcha.show();

 // 获取ticket
this.$root.captcha.getTicket();