vue3-puzzle-vcode  

!img

$3

``node
npm install slide-verify-code --save
`

$3

`vue




``

$3

| 字段 | 类型 | 默认值 | 说明 |
|--------------|---------|------------|-------------------------------------------|
| show | Boolean | false | 是否显示验证码弹框 |
| canvasWidth | Number | 310 | 主图区域的宽度，单位 px |
| canvasHeight | Number | 160 | 主图区域的高度，单位 px |
| puzzleScale | Number | 1 | 拼图块(小的拼图)的大小比例，0.2 ～ 2 ，数字越大，拼图越大 |
| sliderSize | Number | 50 | 左下角用户拖动的那个滑块的尺寸，单位 px |
| range | Number | 10 | 判断成功的误差范围，单位 px, 滑动的距离和拼图的距离小于等于此值时，会判定重合 |
| imgs | Array | null | 自定义图片，见下方例子 |
| successText | String | "验证通过！" | 验证成功时的提示文字 |
| failText | String | "验证失败，请重试" | 验证失败时的提示文字 |
| sliderText | String | "拖动滑块完成拼图" | 下方滑动条里的文字 |

$3

| 事件名 | 返回值 | 说明 |
|---------|------|----------------------------------|
| success | 偏差值 | 验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值 px |
| fail | 偏差值 | 验证失败时会触发，返回值同上 |
| close | null | 用户点击遮罩层的回调 |