react-slider-verify

React 滑动验证组件

• Github 地址：
  • https://github.com/ShenBao/react-slider-verify
• 在线示例：
  • https://shenbao.github.io/react-slider-verify/dist/index.html
  • example
• Antd 示例
• Fusion 示例

截图

安装

$ npm install react-slider-verify -S

使用组件

import ReactSliderVerify from "react-slider-verify";
import "react-slider-verify/dist/index.css";

<ReactSliderVerify onSuccess={() => {}} />;

重置状态方法

const ref = useRef({} as any);

<div>
    <ReactSliderVerify
        ref={ref}
        onSuccess={() => setState(true)}
    />
    <div>当前状态：{`${state}`}</div>
    <button
        onClick={() => {
            ref.current.reset();
            setState(false);
        }}
    >
    重置
    </button>
</div>

参数说明

字段名	字段类型	默认值	说明
width	number	400	长度
height	number	36	宽度
bgColor	string	#F2F3F5	背景颜色
tips	ReactChild	请按住滑块，拖动到最右边	提示文案
barWidth	number	80	滑块宽度
bar	ReactChild	>>	滑块的内容
successBar	ReactChild	✅	成功后滑块的内容
successBgColor	string	#06ad06	成功后背景颜色
successTips	ReactChild	验证已通过	成功文案
successShowBar	boolean	true	成功后的是否显示 Bar

事件

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

方法

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

More links

• GitHub Home
• Blog Home
• About Me