smscode

• 作者：liuduan
• 邮箱：[email protected]
• 版本：1.0.0

介绍

发送验证码倒计时组件

安装

lm-* 组件使用 npm 进行管理，命名空间统一为 lm-，请使用以下命令进行组件安装。

npm i lm-smscode --save

• 如果你还没有安装 npm，可通过以下方式进行 安装。
• 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

样例

使用

// 情景1：电话号码已经验证，请求已发送，页面加载后自动开启计时
<Smscode
    second={6}
    suffixText={'秒'}
    overText={'重新获取'}
    autoCountDown={true}
    onClick={this.onClick1}>
    获取验证码
</Smscode>

// 情景2：通过disabled状态控制，当禁用解除说明已经验证通过（在input输入框验证）
<Smscode 
    className={'free-style'}
    second={3}
    suffixText={'秒'}
    overText={'重新获取'}
    disabled={this.state.disabled}
    onClick={this.onClick2}>
    获取验证码
</Smscode>

// 情景3：点击按钮先校验电话号码，校验通过发送请求 && 倒计时
<Smscode
    className={'free-style'}
    second={3}
    suffixText={'秒'}
    overText={'重新获取'}
    onClick={this.onClick3}
    onCountDownEnd={this.onCountDownEnd}>
    获取验证码
</Smscode>

// 情景4：页面加载后，立即异步请求验证码，请求成功后手动触发自动倒计时
<Smscode
    ref="smscode"
    second={5}
    suffixText={'秒'}
    overText={'重新获取'} 
    onClick={this.onClick4}>
    获取验证码
</Smscode>

配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | prefixCls | String | 'lm-sendcode' | 自定义类名前缀 | | className | String | '' | 自定义className | | second | Number | 60 | 倒计时时长 | | disabled | Bool | false | 是否禁用按钮 | | autoCountDown | Bool | false | 是否自动开启倒计时 | | reset | Bool | false | 是否重置按钮状态 | | suffixText | String || React.Element | 秒 | 单位及后缀内容 | | overText | String || React.Element | undefined | 倒计时结束后显示文本，不写则为children | | children | String || React.Element | 获取验证码 | 倒数前显示文本 | | onClick | Function | () => {} | 点击按钮回调函数 | | onCountDownEnd | Function | () => {} | 倒计时结束回调函数 |

注意事项

• 不同阶段css样式设置

    .free-style {
        // .disabled、.countdownEnd是内置样式，名称不能更改
        // 设置倒计时开启条件不满足时样式，即this.props.disabled为true时的样式
        &.disabled {
        } 

        // 设置倒计时执行完毕后文本样式
        &.countdownEnd {
        } 

        // 设置倒计时执行过程中的样式
        &:disabled {   
        }
    }
}

开发调试

进入项目目录后，使用 node 命令启动服务

npm run start

打包发布可通过 node 命令执行

npm run build
npm publish

相关资料

• lm 组件开发规范

Changelog

0.1.1

1. 修改github链接

0.1.2

1. 增加 overText 倒计时结束后文本属性
2. 处理 visibilityChange 事件兼容问题

0.1.3

1. 增加不同显示阶段样式配置
2. 增加禁止读秒时，即：this.props.disabled为true时，可执行click回调函数功能
3. 修改了demo中的样例文档
4. 优化了组件

0.1.4

1. 增加组件卸载移除组件内全部监听事件

0.1.5

1. 增加校验信息后自动执行读秒函数功能，详见Readme样例文档。

0.1.6

1. 兼容了4种业务场景, 详见样例文档
2. 重构了样例文档
3. 增加了自动开启倒计时属性autoCountDown
4. 将倒计时执行函数作为按钮点击事件的参数传递到父组件，可由父组件根据时机调用倒计时函数
5. 如不想在按钮点击事件中获取倒计时执行函数，可通过ref获取组件上倒计时执行方法：openCountDown,通过调用该方法执行倒计时（this.refs.smscode.openCountDown()）

0.2.0

1. 更新至兼容react16版本

1.0.0

1. 更新不同状态下组件的颜色