vue-puzzle-vcode 
基于开源的vue-puzzle-vcode改造的,实现了图形后台生成,验证也是走的后端。
!
img
$3
``
npm install cfy-vue-puzzle-vcode --save
`
$3
`
import Vcode from "cfy-vue-puzzle-vcode";
:show="isShow"
@onSuccess="onSuccess"
/>
:show="isVerificationShow"
:imgs="puzzleImgList"
:check-fun="check"
:start-y="startY"
:refresh="refreshVcode"
@onSuccess="onSuccess"
@close="isVerificationShow=false"
/>
`
$3
`
:show="isShow"
@onSuccess="onSuccess"
@onClose="onClose"
/>
`
$3
| 字段 | 类型 | 默认值 | 说明 |
| ------------ | ------- | ------------------ | ---------------------- |
| show | Boolean | false | 是否显示验证码弹框 |
| canvasWidth | Number | 310 | 主图区域的宽度 |
| canvasHeight | Number | 160 | 主图区域的高度 |
| imgs | Array | null | 自定义图片,见下方例子 |
| successText | String | "验证通过!" | 验证成功时的提示文字 |
| failText | String | "验证失败,请重试" | 验证失败时的提示文字 |
| sliderText | String | "拖动滑块完成拼图" | 下方滑动条里的文字 |
$3
| 事件名 | 返回值 | 说明 |
| --------- | ------ | ------------------------------------------------------------ |
| onSuccess | 偏差值 | 验证通过时会触发,返回值是用户移动的距离跟目标距离的偏差值px |
| onFail | 偏差值 | 验证失败时会触发,返回值同上 |
| onClose | null | 用户点击遮罩层的回调 |
$3
`
``
* 也可以是网络图片完整URL路径,但注意图片跨域问题
$3
* 当不传递imgs字段或图片加载出错时,会自动生成随机图片
* 模态框的显示和隐藏完全由父级控制,所以用户通过验证后,需要自行隐藏模态框