Vue技术用于实现滑动拼图验证码功能。

简介：
最初，在浏览哔哩哔哩官方网站登录时，我被其拼图验证码机制所吸引，并产生了自己构建类似功能的想法。首先，我想向大家展示我最终呈现的效果。随后，我会逐步剖析其中的代码实现过程。我之所以考虑开发这个功能，主要源于拼图验证码在前端端的复杂性和深度。相较于简单的文字输入验证码，例如12306的图片验证码，拼图验证码对前端开发者的要求更为严苛，也更具挑战性。为了便于理解，我将总结下关键的技术点：1、弹窗交互功能的实现；2、基于元素定位的弹窗设计；3、元素拖动操作的实现；4、利用Canvas进行图像绘制；5、以及相关的基础逻辑处理。需要说明的是，为了简化开发过程，我直接使用了elementUI的el-popover组件进行弹窗展示，对于不熟悉该组件的小伙伴可以直接参考elementUI官方文档进行了解。此外，我也曾对弹窗组件的功能进行深入研究和编写（基于Popp）。