前言
公司新项目为PC版的，本人一直使用VUE，思考了很久最终决定使用nuxt.js完成该项目，因为是PC端可能涉及SEO，nuxt.js就是解决vue单页面SEO的，虽然之前没接触过，但是看了看文档就是对vue的再次封装。项目的注册页要求获取短信验证码前要有个机器验证，所以我采取了geetest
准备
首先要注册geetest,取到一个key，类似百度地图那种的，然后后端要写一个接口返回校验的参数，类似微信分享前的验签。前端需要做的就是把gt.js下载下来，然后引用。我是在nuxt.config.js引入的，如下代码
plugins: [{ src: '~plugins/gt', ssr: false } ],
使用
项目UI是使用vuetifyjs，表单校验是使用vuelidate ，下面是调用的地方
<v-text-field v-model="vcode" :error-messages="vcodeErrors" placeholder="短信验证码" required @input="$v.vcode.$touch()" @blur="$v.vcode.$touch()">
<div ref="verify" class="get_code" slot="append">{
{tips_vcode}}</div>
</v-text-field>
methods: {
initGeet() {
let self = this;
GeetestInit().then((res) => {
if (res.status == 200) {
let data = res.data;
initGeetest(
{
// 省略配置参数
gt: data.gt,
challenge: data.challenge,
offline: !data.success, // 表示用户后台检测极验服务器是否宕机
new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
product: "bind",
},
function (captchaObj) {
self.$refs.verify.onclick = function () {
//调用前校验手机号是否填写，获取验证码按钮是否可点击
if (!self.$v.phone.$invalid && self.isgetcode) {
captchaObj.verify();
} else {
self.$v.phone.$touch();
}
};
captchaObj.onSuccess(function () {
// 用户验证成功后，进行实际的提交行为
self.getCode();
});
}
);
}
});
},
}
mounted() {
this.initGeet();
},
主要这个绑定点击事件试了比较久才解决，最终的效果就是点击获取验证码，先校验有没填写手机号，按钮是否可用，然后弹出滑块验证，验证成功后调用获取验证码接口，本来还有一个二次校验的接口，在滑块成功后请求接口验证是否成功，我觉得有点没必要去掉了，因为本身就有一个回调方法了，再加上只是用于防止别人刷验证码，没必要搞太麻烦，而且我们用户量也没多少哈哈。
END
希望这篇文章对你有帮助，如有问题欢迎交流