vue3 geetest

Vue3极验是一款基于Vue3开发的极验验证码组件。它提供了多种验证模式，包括滑块验证码、点选验证码、拼图验证码等，可以轻松地在Vue3项目中使用。以下是使用Vue3极验的步骤：

1. 安装Vue3极验

在Vue3项目中使用npm或yarn安装Vue3极验：

   npm install @geetest/vue3-geetest --save

2. 引入Vue3极验

在需要使用Vue3极验的组件中，引入并注册Vue3极验组件：

   import { defineComponent } from 'vue'
   import Geetest from '@geetest/vue3-geetest'

   export default defineComponent({
     name: 'MyComponent',
     components: {
       Geetest,
     },
     // ...
   })

3. 在模板中使用Vue3极验

在模板中使用`geetest`组件，并传入必要的参数：

   <template>
     <div>
       <Geetest
         :gt="captcha.gt"
         :challenge="captcha.challenge"
         :product="captcha.product"
         @success="onSuccess"
         @error="onError"
       />
     </div>
   </template>

其中，`gt`、`challenge`、`product`是在极验后台获取的参数，`@success`和`@error`是成功和失败的回调函数。具体的参数配置可以参考极验官网提供的文档。

4. 处理回调函数

在组件中定义`onSuccess`和`onError`回调函数：

   export default defineComponent({
     name: 'MyComponent',
     components: {
       Geetest,
     },
     setup() {
       const captcha = useCaptcha()

       const onSuccess = (result) => {
         console.log(result)
         // 处理成功逻辑
       }

       const onError = (error) => {
         console.error(error)
         // 处理失败逻辑
       }

       return {
         captcha,
         onSuccess,
         onError,
       }
     },
     // ...
   })

在回调函数中可以处理成功和失败的逻辑，例如提交表单、显示提示信息等。

以上就是使用Vue3极验的基本步骤，需要注意的是，在Vue3中使用`ref`来获取DOM元素，而不是像Vue2中一样使用`$refs`。