拼图验证
puzzle for Vue3
安装
$ npm install puzzle-verify
引入插件和样式
import PuzzleVerify from 'puzzle-verify'
import 'puzzle-verify/lib/style.css'
使用
<PuzzleVerify :imgSrc="imgSrc" />
参数
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
imgSrc | 图片链接,必填 | string | - |
wrapper | 容器类名 | string | - |
width | 宽度 | number | 360 |
tip | 提示文字 | string | '拖动滑块完成验证' |
successTip | 验证成功后的提示文字 | string | '验证成功' |
showRefresh | 是否显示刷新按钮 | boolean | true |
diffDistance | 允许的误差范围,在此范围内表示验证成功 | number | 5 |
autoRefresh | 验证失败后重新加载图片,需要在fail回调时修改新的imgSrc | boolean | false |
callbacks
名称 | 说明 | 参数 |
---|---|---|
success | 验证成功后的回调函数 | type: object { moveDistance: '移动距离', pointX: '缺失的横坐标x位置'} |
fail | 验证失败后的回调函数。如果开启autoRefresh,需要修改新的imgSrc | 同success |
refresh | 刷新拼图,需要传入新的imgSrc | - |
methods
名称 | 说明 | 参数 |
---|---|---|
reset | 重置验证状态 | - |