ith-vue-captcha组件介绍

说明

ith-vue-captcha 行为验证码组件,抛弃了传统字符型输入验证码方式,仅使用鼠标即可完成验证,极大了优化了传统验证码用户体验不佳的问题.

使用注意

• 如遇到验证一直不通过情况,请检查后台服务代码是否为最新 后台使用参见 (opens new window)
• 目前该秘钥通过请求头提供给后台,验证成功后的秘钥需要通过请求头传入captcha-valid中,参考产品ith-admin项目中src/utils/request.js 在请求拦截器中设置到请求头即可, 使用需要增加设置文件 src/utils/captcha-valid.js 用来把秘钥缓存到浏览器

安装

// 安装
npm install ith-vue-captcha
yarn add ith-vue-captcha

组件内引入

<script>
import IthVueCaptcha from 'ith-vue-captcha'
import 'ith-vue-captcha/lib/ith-vue-captcha.css'

// 可以通过配置设置默认验证方式
// IthVueCaptcha.config.setCaptchaType('blockPuzzle')

export default {
  components: {
    IthVueCaptcha: IthVueCaptcha.Verify
  }
}
</script>

使用示例 一 (mode值为pop时,组件位置可以随意放置)

<template>
  <div>
    <button @click="onClick">登录</button>
    
    <ith-vue-captcha v-model="verifyVisible" mode="pop" @success="verifySuccess" />
  </div>
</template>

<script>
import IthVueCaptcha from 'ith-vue-captcha'
import 'ith-vue-captcha/lib/ith-vue-captcha.css'
// 此处需设置一下请求头参数,验证成功的秘钥将带入请求头,秘钥过期时间185s
import { setSettings } from '@/utils/captcha-valid'

export default {
  components: {
    IthVueCaptcha: IthVueCaptcha.Verify
  },
  data () {
    return {
      // mode为pop时,控制是否显示
      verifyVisible: false,
      // 验证状态, 可以手动加一个参数存储用户是否验证过,灵活根据业务来
      verifyStatus: false
    }
  },
  methods: {
    verifySuccess (params) {
      this.verifyStatus = true
      // 把秘钥保存到本地缓存
      setSettings(params.captchaVerification)
      
      // 写一些需要的,例如请求登录接口....等等
    },
    onClick () {
      this.verifyVisible = true
    }
  }
}
</script>

使用示例 二 (mode值为float时,需要放在dom容器中,不需要在通过v-model控制显示)

<template>
  <div>
    <div style="width: 300px;height: 50px;margin-top: 20px;">
      <ith-vue-captcha mode="float" @success="verifySuccess" />
    </div>
  </div>
</template>

<script>
import IthVueCaptcha from 'ith-vue-captcha'
import 'ith-vue-captcha/lib/ith-vue-captcha.css'
// 此处需设置一下请求头参数,验证成功的秘钥将带入请求头,秘钥过期时间185s
import { setSettings } from '@/utils/captcha-valid'

export default {
  components: {
    IthVueCaptcha: IthVueCaptcha.Verify
  },
  data () {
    return {
      // 验证状态, 可以手动加一个参数存储用户是否验证过,灵活根据业务来
      verifyStatus: false
    }
  },
  methods: {
    verifySuccess (params) {
      this.verifyStatus = true
      // 把秘钥保存到本地缓存
      setSettings(params.captchaVerification)
      
      // 写一些需要的,例如请求登录接口....等等
    }
  }
}
</script>

使用示例 三 (mode值为fixed时,固定展示)

<template>
  <div>
    <ith-vue-captcha mode="fixed" @success="verifySuccess" />
  </div>
</template>

<script>
import IthVueCaptcha from 'ith-vue-captcha'
import 'ith-vue-captcha/lib/ith-vue-captcha.css'
// 此处需设置一下请求头参数,验证成功的秘钥将带入请求头,秘钥过期时间185s
import { setSettings } from '@/utils/captcha-valid'

export default {
  components: {
    IthVueCaptcha: IthVueCaptcha.Verify
  },
  data () {
    return {
      // 验证状态, 可以手动加一个参数存储用户是否验证过,灵活根据业务来
      verifyStatus: false
    }
  },
  methods: {
    verifySuccess (params) {
      this.verifyStatus = true
      // 把秘钥保存到本地缓存
      setSettings(params.captchaVerification)
      
      // 写一些需要的,例如请求登录接口....等等
    }
  }
}
</script>

Attributes

参数	说明	类型	默认值	可选值
captchaType	验证码类型	string	--	blockPuzzle-滑动拼图 clickWord-文字点选,如未设置则随机显示
mode	验证码的显示方式, 值为float时需要外部包裹一个容器,验证按钮高度将继承这个容器	string	pop	pop-弹出模态式 fixed-固定 float-浮动显示
vSpace	验证码图片和移动条容器的间隔	number	5	--
explain	滑动拼图验证时滑动条内的提示	string	向右滑动完成验证	--
imgSize	验证码图片宽度和高度设置，支持百分比方式设置	object	{width:'310px',height:'155px'}	--

事件

事件名	说明
success(params)	验证码匹配成功后的回调函数,params.captchaVerification为秘钥验证参数
error	验证码匹配失败后的回调函数
ready	验证码初始化成功的回调函数