滑动拼图验证
纯前端滑动拼图验证
安装依赖
npm install vue-puzzle-vcode --save
直接上代码
1 | <template> |
字段说明
字段 | 类型 | 默认值 | 说明 |
---|---|---|---|
show | Boolean | false | 是否显示验证码弹框 |
canvasWidth | Number | 310 | 主图区域的宽度 |
canvasHeight | Number | 160 | 主图区域的高度 |
imgs | Array | null | 自定义图片,见下方例子 |
successText | String | “验证通过!” | 验证成功时的提示文字 |
failText | String | “验证失败,请重试” | 验证失败时的提示文字 |
sliderText | String | “拖动滑块完成拼图” | 下方滑动条里的文字 |
事件说明
事件名 |返回值 |说明
|- |- |
success |偏差值 |验证通过时会触发,返回值是用户移动的距离跟目标距离的偏差值px |
fail |偏差值 |验证失败时会触发,返回值同上 |
close |null |用户点击遮罩层的回调 |
感谢大佬无私分享
-------------本文结束感谢您的阅读-------------