sweet-gt-captcha v1.0.13

sweet-pt-captcha 极验证组件

极验证组件使用方法

安装

npm i sweet-gt-captcha

  import Vue from 'vue'
  import SweetPluginGtCaptcha from 'sweet-gt-captcha';

  Vue.use(SweetPluginGtCaptcha)

  <template>
    <sweet-gt-captcha
      ref="captcha"
      :formData="form"
      @onClose="onClose"
      @onError="onError"
      @onReset="onReset"
      @onSuccess="onSuccess"></sweet-gt-captcha>
  </template>
  <script>
    export default {
      data() {
        return {
          status: false, // 极验证的验证结果，验证成功后是一个对象，验证失败或未验证时为布尔假值false
          form: {
            userName: '',
            password: ''
          }
        }
      },
      methods: {
        onReset(obj) {
          this.status = obj.result
          // 重置验证后的业务处理
          console.log('reset', obj)
        },
        onSuccess(obj) {
          this.status = obj.result
          // 验证成功后的业务处理
          console.log('onSuccess', obj)
        },
        onError() {
          // 极验证出错, balabala错误业务处理或提示
          console.log('onError')
        },
        onClose() {
          // 极验证关闭, balabala关闭后需要做的业务处理或提示
          console.log('onClose')
        }
      }
    }
  </script>

props

product

极验证的展现形式,可选值: float、popup、custom、bind, 参数同极验证的product参数, 默认值popup

• type: String
• default: 'popup'

width

按钮的长度,带单位的数值字符串,单位可以是px、em、%、rem、pt, 参数同极验证的width参数, 默认值300px

• type: String
• default: '300px'

lang

前端国际化语言标记值, 参数同极验证的lang参数, 默认值zh-cn

• type: String
• default: 'zh-cn'

https

是否使用https请求, 参数同极验证的https参数, 默认值false

• type: Boolean
• default: false

timeout

极验证中单个请求的响应超时时间, 单位ms,参数同极验证的timeout参数, 默认值30000

• type: Number
• default: 30000

area

后续弹出的验证的区域————相关dom区域的的节点id,当product值为custom时,该参数必填,同极验证的area参数, 默认值为空

• type: String
• default: ''

next_width

自定义弹出验证时弹出验证层的宽度,当product值为custom时,该参数有效,默认为area区域的90%, 同极验证的next_width参数, 默认值90%

• type: String
• default: '90%'

bg_color

自定义弹出验证时弹出层的透明蒙版背景色值, 默认为黑色, 透明度60%, 当product值为custom时,该参数有效, 同极验证的bg_color参数, 默认值#000

• type: String
• default: '#000'

action

极验证初始化的参数获取接口, 默认值sso/deed_captcha

• type: String
• default: 'sso/deed_captcha'

formData

需要极验证的提交表单的数据对象,这里传进来的作用是————校验过极验证之后未提交表单又修改了其他字段的值时可以监听数据变化重置极验证, 默认值{}

• type: Object
• default: {}

Methods

getValidate

获取极验证的验证结果

• param: null
• returns: Boolean|Object 极验证的验证结果,当为布尔值时一定为false,表示未验证或验证失败，为对象时说明验证成功

verify

当product为bind类型时，手动调用此极验证校验方法进行二次验证

• param: null
• returns: null

reset

重置极验证校验

• param: null
• returns: null

Events

onSuccess

极验证验证成功后触发的事件

• param: Object { result: <Object>, validate: <Boolean> } 验证结果
• returns: null

onError

极验证验证出错后触发的事件

• param: null
• returns: null

resetCaptcha

重置极验证校验后触发的事件

• param: Object { result: <Object>, validate: <Boolean> } 重置后的验证结果
• returns: null

onClose

极验证关闭后触发的事件

• param: null
• returns: null