--- theme: fancy --- > 本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究 ## 前言 hello, 大家好, 我是徐小夕, 今天又到了我们的博学时间。本文是 [**100+前端几何学应用案例**](https://juejin.cn/column/7140106706628902948) 专栏的第五篇文章, 之前和大家分享了如何从零实现**几何画板**以及几何画板的**撤销 / 重做 / 图层管理等**功能: - [几何学在前端边界计算中的应用和原理分析](https://juejin.cn/post/7148825018024230942) - [前端图形学实战: 从零开发几何画板(vue3 + vite版)](https://juejin.cn/post/7154723970007171108) - [前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)](https://juejin.cn/post/7162781339920367630) - [前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)](https://juejin.cn/post/7165769387050270733) 今天和大家分享一个新的图形学实战——**滑动验证码的实现**。 ## 你将收获 - vue3组件的设计思路和技巧 - canvas的常用绘图api用法 - 滑动验证码组件的基本设计原理和实现过程 - 如何从零发布vue3组件库 ## 效果演示按照笔者的写作习惯, 这里先和大家演示一下实现的效果: ![2022-11-19 14.37.23.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3e69accd49fe43b6a197109c5741a15a~tplv-k3u1fbpfcp-watermark.image?) ## 正文这篇文章我会带大家使用 **vue3 + vite** 来实现滑动验证码, 当然笔者之前也实现了基于 **react** 的滑动验证码组件, 感兴趣的可以参考我之前的文章: - [从零开发一款轻量级滑动验证码插件](https://juejin.cn/post/7007615666609979400) 同时也可以在 **github** 上查看到对应的实现代码: https://github.com/MrXujiang/vue-slider-vertify ### 技术实现在着手开发组件之前我们需要提前明确组件的设计需求, 并制定合理的开放 **api**, 这里分享一下我总结的组件优雅设计的原则: - **可读性**(代码格式统一清晰，注释完整，代码结构层次分明，编程范式使用得当) - **可用性**(代码功能完整，在不同场景都能很好兼容，业务逻辑覆盖率) - **复用性**(代码可以很好的被其他业务模块复用) - **可维护性**(代码易于维护和扩展，并有一定的向下/向上兼容性) - **高性能**(组件具有一定的性能, 如复杂场景的渲染, 计算等) 而我们滑动验证码组件要想让更多的人使用, 就必须做到一定程度的灵活可配置, 接下来是我总结的滑动验证码的核心 **api**: - 控制滑动验证码的显示隐藏(visible) - 控制滑动验证码的大小(width 和 height) - 控制滑块的样式(边长 l 和半径 r) - 滑块的提示文本(text) - 滑动验证码的图片数据源(imgUrls) - 验证成功的事件回调(onSuccess) - 验证失败的事件回调(onFail) - 用户自定义的验证逻辑(onCustomVertify) - 用户拖拽滑块时的回调(onDraw) - 刷新图片时的回调(onRefresh) 对应图示如下: ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/168330b7d0154f7aba9aca3876a16f5e~tplv-k3u1fbpfcp-watermark.image?) 属性功能设计好之后我们来构想一下在vue项目中具体的使用方式: ```html ``` 以上基础准备好之后我们来可看一下滑动验证码的具体交互流程: ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f96502b2f6d4fe3a8083d542600715b~tplv-k3u1fbpfcp-watermark.image) #### 1.设计滑动验证码的基本骨架这里我以vue3组合函数的方法来定义一下 **vue-slider-veritfy** 组件骨架: ```tsx