CountDown组件

01. 说明

此组件可用来制作发送验证码后的按钮倒计时。

02. API

参数	说明	类型	默认值
format	时间格式化显示	Function(time)
target	目标时间	Date	-
onEnd	倒计时结束回调	Function	-

03. 使用示例

使用

import CountDown from 'components/CountDown';

    <FormItem
      required
      label={intl.get('hiam.userInfo.model.user.phoneCaptcha').d('短信验证码')}
      {...formItemLayout}
    >
      {getFieldDecorator('captcha', {
        validateTrigger: 'onBlur',
        rules: [
          {
            required: true,
            message: intl.get('hzero.common.validation.notNull', {
              name: intl.get('hiam.userInfo.model.userInfo.phoneCaptcha').d('短信验证码'),
            }),
          },
        ],
      })(<Input style={{ width: 257, marginRight: 10 }} />)}
      <Button
        style={{ width: 90 }}
        disabled={validCodeSendLimitFlag}
        loading={postCaptchaLoading}
        onClick={() => {
          this.handleGainValidCodeBtnClick({ type: 'oldPhone', value: userInfo.phone });
        }}
      >
        {validCodeSendLimitFlag ? (
          <CountDown target={validCodeLimitTimeEnd} onEnd={this.handleValidCodeLimitEnd} />
        ) : (
          intl.get('hiam.userInfo.view.option.gainCaptcha').d('获取验证码')
        )}
      </Button>
    </FormItem>