• 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>