vue-tencent-captcha v0.3.1

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>

属性

配置参数

options提供以下配置参数：

extraBizParam: {
    bizState: 'hhh'
}

回调内容

// 回调
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();