1.1.1 • Published 3 years ago
react-swipe-verify v1.1.1
title: React 移动端滑动验证组件
🌰 示例
- 示例：http://blog.xbr.pub/react-swipe-verify/dist/
- 使用移动端设备打开示例页，或使用浏览器调试工具（打开后刷新页面，否则会出现宽度获取错误，无法滑动到成功状态的问题）。
📖 API
| props | 类型 | 描述 |
|---|---|---|
| onSuccess | func | 滑动成功的回调函数：有返回值时会在1秒后重置滑动组件状态；无返回值则滑动成功后组件保持成功状态。 |
| loading | bool | 控制组件 loading 状态 |
| loadingNode | ReactNode | 组件 loading 状态元素/文案展示 |
| disabled | bool | 控制组件是否可用 |
| text | string | 组件正常状态先展示的文案 |
| containerStyle | object | 最外层容器的样式 style，建议只传入布局相关属性 |
| swipeNode | ReactNode | 滑块内部元素 |
| successSwipeNode | ReactNode | 校验成功状态下滑块内部元素 |
| customClass | object | 自定义样式 className，详见下表 |
customClass
| 属性 | 描述 | 不建议覆盖属性 | 建议 |
|---|---|---|---|
| containerBar | 滑动条容器 | position display | 覆盖 height 时，请设置相同的 line-height 值 |
| containerBarUnable | disabled/loading 状态下的容器 | ||
| swipedPart | 滑动过的部分 | position dispaly width | 🔥 覆盖 width 将导致组件无法正常渲染 |
| swiperBlock | 滑块 | position dispaly transform | 覆盖 height 时，请设置相同的 line-height 值，建议与 containerBar 高度保持一致🔥 覆盖 transform 将导致组件无法正常渲染 |
🔥 注意：
- 覆盖不建议的属性可能导致组件异常！！！请按建议规范自定义样式。
- 建议使用
css modules。