2021-05-19 14:36:08 晓掌柜 版权声明:本文为站长原创文章,转载请写明出处
在前面的一篇文章浅析用户登录功能实现中,我们提到了图片滑块验证,以优化我们的项目。当时是没有相关图片滑块验证的文章的,
那在这里就把这个坑填一下,下面介绍一下Nuxt项目中整合图片滑块验证。
这里我们使用vue-monoplasty-slide-verify来实现图片滑动验证,这是一款基于滑动式的验证码,免于字母验证码的繁琐输入,
用于网页注册或者登录。这里贴一下其gitee项目地址:
https://gitee.com/monoplasty/vue-monoplasty-slide-verify
npm install --save vue-monoplasty-slide-verify
使用页面进行引入:
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
<!-- 图片验证区域 -->
<slide-verify
v-if="showSlideBar"
class="xa-slideBar"
ref="slideblock"
@again="onAgain"
@fulfilled="onFulfilled"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
:accuracy="accuracy"
:slider-text="slideBarText"
></slide-verify>
属性:
data() {
return {
userNo: "",
userPwd: "",
showSlideBar: true,
/* 滑块文字提示 */
slideBarText: "按住滑块,拖动完成上面拼图",
/* 精确度小,可允许的误差范围小;为1时,则表示滑块要与凹槽完全重叠,才能验证成功。默认值为5 */
accuracy: 1,
};
},
方法:
onSuccess(times) {
/* 验证通过,时间单位毫秒 */
},
onFail() {
/* 验证失败 */
},
onRefresh() {
/* 点击刷新回调函数 */
},
onFulfilled() {
/* 刷新成功回调函数 */
},
onAgain() {
this.msg = "try again";
/* 刷新 */
this.$refs.slideblock.reset();
},
handleClick() {
/* 父组件直接可以调用刷新方法 */
this.$refs.slideblock.reset();
},