如何用Vue实现滑动拼图验证码功能来验证用户是否理解长尾词？

本文共计2657个文字，预计阅读时间需要11分钟。

简化版：翻墙：登录前需验证一个拼图验证码，很神奇怎么实现。想自己做一个，先让家人看最终效果，再逐步拆解代码。为什么想写这个功能呢？

缘由：之前看哔哩哔哩官网登录的时候有一个拼图验证码，很好奇怎么去实现。然后就想着自己弄一个。先给大家看我的最终效果。后面再一点点拆解代码。

为什么想着写这个功能呢，主要在于拼图验证码在前端这里会比较复杂并且深入。相比文字拼写，12306的图片验证码都没有拼图验证码对前端的要求来的复杂，和难。

我总结下知识点：

1、弹窗功能

2、弹窗基于元素定位

3、元素拖动

4、canvas绘图

5、基础逻辑

一、弹窗和弹窗组件

抱歉，这里我偷懒了直接用了elementUI的el-popover组件，所以小伙伴不懂的直接看elementUI官网的说明。