github：github.com/caijf/rc-sl…
需求背景
- 背景图和拼图通过接口获取
- 适配移动端和PC端
- 适配多种不同场景，嵌入式/触发式/弹窗/不同尺寸
- 支持自定义样式
- 支持插入dom
- 验证成功后，可能长时间没操作需要手动刷新
- 简单易用
苦于以前项目用的滑块验证码组件特别麻烦难用，又找不到合适的开源组件后，决定自己做一个。
在这里主要推广介绍下，文档地址有更详尽的介绍和代码演示。
先睹为快
gif图片有点糊，点击文档地址体验。
几种状态
加载中
默认
移动中
验证中
验证失败
验证成功
展示方式
嵌入式
默认，展示滑轨和拼图区域。
触发式
只展示滑轨，鼠标移入 或 触摸时显示拼图。
交互说明
- PC 端：鼠标移入时显示拼图，移出隐藏拼图。
- 移动端：触摸滑块显示拼图，停止触摸后，如果有向右滑动过则验证后隐藏拼图，否则隐藏拼图。
结合弹窗
其实就是 弹窗 + 嵌入式 。
一些细节
- PC端不同操作的鼠标状态
- 拼图支持操作
- 样式既使用了 css variable ，同时也要适配 IE11 （如果你的项目需要支持 IE 11，请不要使用 css variable）
- 验证方法参数中包含了
移动轨迹、操作持续时长、操作目标、连续错误次数等，如果对安全级别要求较高的，可以自行添加一些算法判断 - ...
结尾
近日写了个
拼图生成器为了解决服务端拼图图库来源问题。当然也支持客户端直接使用。
如有问题，欢迎反馈～
补充
- 20230901 支持纯滑块无拼图方式
- 20231103 写了个 Nodejs 生成拼图工具：node-puzzle
