拼图滑块验证-vue优兼容组件
功能概述
制作一个vue组件，拼图验证，兼容移动端，PC端，成功或失败可调用不同的回调函数。数据驱动，不需要JQ。
可编辑属性：宽width，高height，图片列表puzzleImgList，监听成功on-success，监听失败on-errorr
效果展示
因为这个组件有点复杂先介绍效果。如图1，跟B站那个差不多。
图1.效果展示
图2.效果展示
使用方法
组件使用：
在login.vue中注册该组件并使用，传递test方法为成功时的回调函数。如图3
图3.使用栗子
源码分析
首先解释HTML结构，主图是img标签，左边拼图片是两个canvas叠加。一个是canvas显示拼图片，另一个只做阴影效果（用一个canvas做拼图加阴影太难）。右边缺口是另一个canvas，勾勒边缘中间透明。
然后解释js动作，下方的拖动块做经典滑动案例。点击时（mousedown/touchstart）取movestart的坐标,此时为moving状态。鼠标长按结束或者手指离开屏幕时（mouseup/touchend）置movestart坐标0，此时moving状态结束。可添加moving状态属性或者判断movestart是否为0来判断当前状态。moving状态时监听鼠标或手指移动（mousemove/touchmove）记录坐标变化。
移动时其实是左边包含两个canvas的div跟着移动不是在canvas内操作单片拼图。这样简单些。
其中初始化canvas因为要取dom一定要在mounted里。created中dom尚未渲染完成，只能操作数据。
图3.主要方法
图片从一个url的数组中随机选择，拼图位置也通过随机函数获取，随机整数数函数如下
图4.随机函数
注意点：canvas重置需要以重置画布尺寸的方式清空，不要用clearRect()。
图5.清空canvas
设置成功失败回调函数：
props中设置onSuccess与onError属性，接收function。
图6.props
移动位置在误差允许范围内调用函数：
图6.调用函数
想了解更多或者下载vue组件文件可以查看我gitee上的完整代。
我做的Vue组件源码：拼图vue组件在项目中源码@gitee
转载到其他平台需含本文的简书链接，vue技术我只在简书发布
