本项目为tianai-captcha-demo的Vue简单复刻版。
由于该demo自2ae2270开始接入了新UI,并对前端js代码做了加密,在Vue直接调用不是太方便。
不太方便的原因可能有以下几点:
-
使用时请求验证码接口和验证接口结构必须符合天爱的接口结构,可能过于严苛,不易扩展
-
在当时好像还没有在Vue下的调用demo
-
不是太想引入jQuary
所以通过在运行demo时扒html代码,以及2ae2270之前的代码作为参考,做了这个demo。 并打包成了一个vue组件<tianai-captcha>
本项目分为3个主分支
-
通过Vue实现了天爱验证码的前端
-
支持类型为
SLIDER
,CONCAT
,ROTATE
,WORD_IMAGE_CLICK
的行为验证码 -
附加了一个登录demo, 展现了
<tianai-captcha>
的使用方法 -
另添加了一个看图识字的验证码
IMAGE_TEXT_IDENTIFY
(随机生成4个数字字母,前端做输入验证)注:该功能不在
<tianai-captcha>
组件内实现,只是作为本示例的一个扩展演示 -
后端接口可以对原始验证码数据进行包装
本示例进行如下封装进行传出
{
"code": 0,
"data": {
//原始验证码数据
},
"message" : "成功"
}
-
验证码的图片只能是官方demo中提供的图片,因为前端图片宽高目前还是写死的,没有过多的计算比例
-
不包含官方增强版的内容
-
暂不支持手机端
-
...
-
Props:
-
captcha_data 天爱验证码的原始验证码数据类型
-
captcha_valid 天爱验证码验证结果
-
refresh_captcha 是否重新获取验证码
-
-
Emits: 需要传入修改以上三个参数的方法
-
changeData
-
changeValid
-
changeRefresh
-
本项目是通过对前端效果模拟自主实现的,和官方提供的可能还是有差异和不太支持的功能。只能做到看起来像,可以运行,没有明显bug。