```只是在原有基础上根据自己的需求加了一点点功能而已```
npm install vue3-slider-vcode只是在原有基础上根据自己的需求加了一点点功能而已`
vue3-slider-vcode  
DEMO: https://isluo.com/work/vue-puzzle-vcode/
!img
$3
`node
npm
install
vue3 - puzzle - vcode--
save
`
$3
`vue
`
$3
| 字段 | 类型 | 默认值 | 说明 |
|--------------|---------|------------|---------------------------------------------|
| title | String | "" | 标题 |
| isClose | Boolean | false | 是否显示关闭弹窗操作 |
| show | Boolean | false | 是否显示验证码弹框 |
| type | String | "modal" | "modal"模态框形式 / "inside"内嵌形式 |
| 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 | "拖动滑块完成拼图" | 下方滑动条里的文字 |
| className | String | "" | 给根元素一个class类用于自定义样式 |
| zIndex | Number | 999 | 设置根元素一个层级z-index |
$3
| 事件名 | 返回值 | 说明 |
|---------|--------|---------------------|
| success | 偏差值，对象 | 验证通过时会触发，返回值见下方 |
| fail | 偏差值，对象 | 验证失败时会触发，返回值见下方 |
| close | null | 用户点击遮罩层的回调 |
| reset | null | 用户手动点击右上角刷新按钮时触发的回调 |
success / fail 的返回值：
`javascript
deviation: number, // 偏差值，用户滑动的位置 和 拼图缺口所在位置 的距离，单位px
obj
:
{
deviation: number, // 同 deviation
offsetX
:
number, // 用户滑动的距离，单位px
pinX
:
number, // 拼图缺口的所在位置（相对canvas的左边缘）， 单位px
}
`
$3
入参type="inside"， 将启用内嵌模式
应该用一个元素包裹：
`vue
`
$3
Nuxt.js中如果发现样式有问题，请使用npm install vue3-slider-vcode@1.1.2-nuxt`这个版本试试。