Vue2 中使用 Vaptcha 组件验证：集成与示例

首先，需要在页面中引入 vaptcha 的脚本文件：

<script src='https://v.vaptcha.com/v3.js'></script>

然后，在组件中使用 vaptcha 的方式如下：

<template>
  <div ref='vaptcha'></div>
</template>

<script>
export default {
  data() {
    return {
      vid: 'your_vid', // 在vaptcha官网注册后获取
      challenge: null,
      vaptchaInstance: null
    };
  },
  mounted() {
    this.initVaptcha();
  },
  methods: {
    // 初始化vaptcha
    initVaptcha() {
      this.vaptchaInstance = new Vaptcha(this.$refs.vaptcha, {
        vid: this.vid,
        type: 'embed',
        scene: 0,
        offline_server: 'http://localhost:8000/vaptcha/demo',
        onSuccess: (data) => {
          this.challenge = data.challenge;
          this.$emit('success', data);
        },
        onError: (data) => {
          this.$emit('error', data);
        }
      });
    },
    // 重置vaptcha
    reset() {
      this.vaptchaInstance.reset();
    }
  }
};
</script>

在上述代码中，我们通过在组件的mounted钩子函数中调用initVaptcha方法来初始化 vaptcha 实例。在 vaptcha 初始化的时候，需要传入参数，包括vid、type、scene等信息，其中vid是必须的，其他参数可根据需要自行配置。此外，我们还在组件中定义了一个reset方法，用来重置 vaptcha。

最后，我们可以在使用该组件的页面中，通过以下方式来调用该组件：

<template>
  <div>
    <vaptcha @success='handleSuccess' @error='handleError' ref='vaptcha'></vaptcha>
    <button @click='resetVaptcha'>重置</button>
  </div>
</template>

<script>
import Vaptcha from '@/components/Vaptcha';

export default {
  components: {
    Vaptcha
  },
  methods: {
    // vaptcha验证成功的回调函数
    handleSuccess(data) {
      console.log('验证成功', data);
    },
    // vaptcha验证失败的回调函数
    handleError(data) {
      console.log('验证失败', data);
    },
    // 重置vaptcha
    resetVaptcha() {
      this.$refs.vaptcha.reset();
    }
  }
};
</script>

在上述代码中，我们引入了刚才定义的Vaptcha组件，并在页面中使用Vaptcha组件。在Vaptcha组件中，我们通过@success和@error来监听 vaptcha 验证成功和失败的事件，并在事件回调函数中进行相应的处理。此外，我们还在页面中定义了一个按钮，用来调用Vaptcha组件中定义的reset方法，来重置 vaptcha。