react-simple-verify

简易滑动验证之react组件

• 作者邮箱：[email protected]
• github项目地址：https://github.com/guqingming/react-simple-verify
• 码云项目地址：https://gitee.com/mycssweb/react-simple-verify

截图

安装

$ npm install react-simple-verify

注册组件

import React from 'react'
import ReactSimpleVerify from 'react-simple-verify'
import 'react-simple-verify/dist/react-simple-verify.css'

使用组件

<ReactSimpleVerify ref="verify" success={ this.success.bind(this) }/>

重置状态方法

/**
 * 重置
 */
private reset() {
  const $verify = this.refs.verify as ReactSimpleVerify
  $verify.reset()
  this.setState({
    isPass: false
  })
}

参数说明

| 字段名 | 字段类型 | 默认值 | 说明 | | ------------- | -------- | ------------------------ | -------------------------- | | width | number | 340 | 长度 | | height | number | 36 | 宽度 | | borderColor | string | #e4e4e4 | 边框颜色 | | bgColor | string | #f2f3f5 | 背景颜色 | | borderRadius | number | 4 | 圆角大小 | | tips | string | 请按住滑块，拖动到最右边 | 提示文案 | | barBackground | string | 默认图片 | 滑块的背景颜色，可以是图片 | | movedColor | string | 默认颜色 | 滑过的颜色 | | successTips | string | 完成验证 | 成功文案 | | successIcon | string | 默认图片 | 成功后的图标 |

事件

| 事件名 | 说明 | 回调参数 | | ------- | -------------------- | -------- | | success | 验证完成后的回调函数 | - |

方法

| 事件名 | 说明 | 参数 | | ------ | ---------------------- | ---- | | reset | 使验证器重置为初始状态 | - |