纯前端滑动拼图验证
安装依赖
npm install vue-puzzle-vcode --save
直接上代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| <template> <div> <Vcode :show="isShow" :imgs="[imgs]" @success="onSuccess" @close="onClose" @fail="onFail" /> <button @click="onSubmit">登录</button> </div> </template>
<script> import Vcode from "vue-puzzle-vcode"; export default { data(){ return { isShow: false, // 验证码模态框是否出现 imgs: require('@/assets/logo.png') } }, methods:{ onSubmit(){ this.isShow = true; }, // 用户通过了验证 onSuccess(msg){ console.log(msg) this.isShow = false; // 通过验证后,需要手动隐藏模态框 }, // 验证失败 onFail(msg){ }, // 用户点击遮罩层,应该关闭模态框 onClose(){ // this.isShow = false; } }, components:{ Vcode } } </script>
|
字段说明
字段 |
类型 |
默认值 |
说明 |
show |
Boolean |
false |
是否显示验证码弹框 |
canvasWidth |
Number |
310 |
主图区域的宽度 |
canvasHeight |
Number |
160 |
主图区域的高度 |
imgs |
Array |
null |
自定义图片,见下方例子 |
successText |
String |
“验证通过!” |
验证成功时的提示文字 |
failText |
String |
“验证失败,请重试” |
验证失败时的提示文字 |
sliderText |
String |
“拖动滑块完成拼图” |
下方滑动条里的文字 |
事件说明
事件名 |
返回值 |
说明 |
success |
偏差值 |
验证通过时会触发,返回值是用户移动的距离跟目标距离的偏差值px |
fail |
偏差值 |
验证失败时会触发,返回值同上 |
close |
null |
用户点击遮罩层的回调 |
原文链接
感谢大佬无私分享