Vue项目引入腾讯验证码captcha

首先，它长这样

1.引入源码 https://ssl.captcha.qq.com/TCaptcha.js

2.js

let langtion = 'zh-hk';
let captchaId = 'XXXXX'; //腾讯滑块验证码appid
//生成一个滑块验证码对象
var captcha = new TencentCaptcha(captchaId, function(res) {
   if (res.ret === 0) {
         //成功
       }
  });
//  滑块多语言调用
captcha.initOpts.forceLang = langtion;
captcha.langFun();
// 滑块显示
captcha.show();

参数说明

callback： 验证码页面关闭回调函数。用户验证之后，会调用该函数，传入json格式验证参数。

{ret:xxx,ticket:"xxx"}

ret=0 表示用户验证完成，业务可以校验 ticket；

ret=1 表示用户未验证验证码，此时没有 ticket 参数。

参数 ticket 需要提交给业务后台，具体填哪个字段参考后面后台 server 开发部分。

themeColor ：设置页面的主题色彩，值为 16 进制色彩，比如 ff572d。设置后页面里的按钮和图标会变成设置的颜色

showHeader
：显示验证码页面的 header (返回和帮助，只对手机页面有效)

false：不显示

type ：PC 端可选选项，配置验证码的样式。具体样式表现可以查看验证码官网

"point"：触发式（默认）

"embed"：嵌入式

"popup"：弹窗式

pos：设置弹框验证码的位置属性，该参数只对 PC 弹框验证码有效

absolute: 绝对定位

fixed：相对于浏览器窗口的绝对定位

static：静态定位

relative：相对定位

keepOpen：设置验证通过页面属性

false：验证通过刷新（默认）

lang：设置验证码语言类型

简体中文：2052（默认）

繁体中文：1028

英文：1033

要记得及时调用capDestroy()来销毁你创建的script标签，否则就会出现很多个script标签