behavior-captcha

基于vue3的拖拽行为验证组件，支持移动端和pc及uniapp的app端。

后台可直接用开源的 https://github.com/dromara/tianai-captcha

安装

1. npm 推荐使用npm

npm i -S behavior-captcha

注册组件

1. 全局注册

   <template>
     <behavior-captcha></behavior-captcha>
   </template>
   <script>
    import Vue from 'vue'
    import BehaviorCaptcha from 'behavior-captcha'
    Vue.use(BehaviorCaptcha)
   </script>

2. 局部注册

   <template>
     <behavior-captcha></behavior-captcha>
   </template>
   <script>
     import { BehaviorCaptcha } from 'behavior-captcha'
     export default {
         name: '',
         components: {BehaviorCaptcha} //在组件内注册
     }
   </script>

属性

modelValue

• 类型Boolean

• 默认值false

  是否显示组件

textData

• 类型Object

• 默认值{}

  文案对象。包含如下属性：
  title: 标题，默认为：请拖动滑块完成拼图
  checkSuccess: 验证成功提示，默认为：验证通过
  checkFail: 验证失败提示，默认为：验证失败，请重新尝试
  moveText: 滑动指示，默认为：向右滑动

generateFun

• 类型Function

  生成验证勾子方法，该方法应返回Promise，并响应规定格式数据。

	generateFun(){
		return new Promise(reslove => {
			// 接口获取数据
			const data = {
				"captcha": {
					"backgroundImage": "data:image/png;base64,iVBORw...",
					"templateImage": "data:image/png;base64,iVBORw...",
				},
				"id": "SLIDER_757e9878e96748bcbbaee8d8009ba9fc"
			}
			reslove(data)
		})
	},

checkFun

• 类型Function

  验证方法，该方法应返回Promise

	checkFun(param){
		// param: {
		// 		id: '',		//验证标识，generate 接口返回
		// 		track: {
		// 			bgImageHeight: 180,		//写死的
		// 			bgImageWidth: 300,		//写死的
		// 			startTime: null, 		//验证器前端初始化时间
		// 			stopTime: null,			//验证器前端初提交验证时间
		// 			templateImageHeight: undefined,		//写死的
		// 			templateImageWidth: undefined,		//写死的
		// 			trackList: [],						//验证行为数据，自行打印看
		// 		}
		// },
		return new Promise(reslove => {
			// 请求接口
			let res;
			//res为后台接口验证后返回，res存在值，则为成功，并且该值会在@success事件中回传
			// 若为空，则为失败
			reslove(res);
		})
	},

事件

success(data)

• 验证成功事件

• 参数data

  check 接口返回的数据

更新日志:

• [ 1.0.0 ] 上线