首先到官方的demo中去下载
gt.js
文件,
gt.js地址
在
main.js
中引入gt.js
文件,这样就能使用它的初始化api,挂在到了windows上
// 使用Geetest 滑动校验
import "@/assets/js/gt"
//在登录页面
<template>
<section>
<div id="test"></div>
</section>
</template>
<script>
export default{
mounted(){
//1.先调用后端给的初始化接口,拿到initGeetest需要的 对应的配置参数
//这里换成自己对应的封装请求
this.$api.init('初始化接口地址xxx').then(res=>{
let {code,data}=res;
initGeetest({
gt: data.gt,
challenge: data.challenge,
offline: !data.success,
product: "popup"
},(captchaObj)=>{
var validate = captchaObj.getValidate();
captchaObj.appendTo('#test');//把图形渲染到对应的dom元素中
captchaObj.onReady(()=>{})
captchaObj.onSuccess(()=>{
//这里是验证成功的回调,这里可以处理逻辑
captchaObj.destroy();//这里是销毁实例,处理完逻辑最终销毁
})
})
})
}
}
</script>