vue-puzzle-vcode-dd

Vue 拼图人机验证、右滑拼图验证

用vue-puzzle-vcode,在vue-puzzle-vcode的基础上新增后端校验。

$3

``node
npm install vue-puzzle-vcode-dd --save
`

$3

`vue
import Vcode from "vue-puzzle-vcode-dd";
:show="isShow"
:pinXY="pinXY"
:canvasWidth="canvasWidth"
:canvasHeight="canvasHeight"
@onSuccess="onSuccess"
@onClose="onClose"
:imgs="imgs_arr"
/>

`

$3

`vue



`
##后端校验公式
`

//session值：pinX pinY
//传入值 newX startX
const startWidth=50
const canvasWidth=310
var w = startWidth + newX - startX;
var styleWidth=w < 50 ? 50 : w > this.canvasWidth ? this.canvasWidth : w;
var x = Math.abs(
pinX -
(styleWidth - 50) +
20 * ((styleWidth - 50) / (canvasWidth - 50)) -
3
);
x<10 且等于前端传入的x 则成功校验

`

$3

| 字段 | 类型 | 默认值 | 说明 |
| ------------ | ------- | ------------------ | ---------------------- |
| show | Boolean | false | 是否显示验证码弹框 |
| canvasWidth | Number | 310 | 主图区域的宽度 |
| canvasHeight | Number | 160 | 主图区域的高度 |
| imgs | Array | null | 自定义图片，见下方例子 |
| successText | String | "验证通过！" | 验证成功时的提示文字 |
| failText | String | "验证失败，请重试" | 验证失败时的提示文字 |
| sliderText | String | "拖动滑块完成拼图" | 下方滑动条里的文字 |
| pinXY | String | "拼块区域的位置" | 传入拼块区域的区域位置[0, 0]，这个值后端生成传入 |


$3

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

$3

`vue



``
* 也可以是网络图片完整URL路径，但注意图片跨域问题

$3

* 当不传递imgs字段或图片加载出错时，会自动生成随机图片
* 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框