VerifyCode 验证码组件

发送验证码，间隔 60s

发送验证码

import React, { useState } from 'react'
import { Input, Button } from 'antd'
interface IVerifyCodeProps {
  value?: string
  onChange?: (value: string) => void
  readyPost?: boolean
  phone?: number
  style?: React.CSSProperties
}
export const VerifyCode: React.FC<React.PropsWithChildren<IVerifyCodeProps>> =
  ({ value, onChange, readyPost, phone, ...props }) => {
    const [lastTime, setLastTime] = useState(0)
    const counting = (time = 60) => {
      if (time < 0) return
      setLastTime(time)
      setTimeout(() => {
        counting(time - 1)
      }, 1000)
    }
    return (
      <div
        style={{ display: 'inline-flex', width: '100%', alignItems: 'center' }}
      >
        <Input
          {...props}
          style={{ marginRight: 5, ...props.style }}
          value={value}
          onChange={onChange}
        />
        <div
          style={{
            flexShrink: 0,
            color: '#999',
            width: 100,
            height: 35,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          {lastTime === 0 && (
            <Button
              disabled={!readyPost}
              block
              onClick={counting}
            >
              发送验证码
            </Button>
          )}
          {lastTime > 0 && <span>剩余{lastTime}秒</span>}
        </div>
      </div>
    )
  }

手机号验证

<Item
  label='手机号'
  name='phone'
  rules={[
    { required: true, message: '请输入手机号!' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
  ]}
>
  <Input
    inputMode='numeric'
    placeholder='请输入手机号'
  />
</Item>