Vue はスライド検証に Geetest を使用します

ドキュメントアドレス
パラメータの設定

---

まず、公式デモに移動して、 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>