react后台登录页封装

基于 antd 后台登录页面封装。依赖 antd, react-captcha-code。 支持（账号/密码/验证码、账号/密码、手机号/验证码）三种方式。

安装

npm install --save @ahws/login

引入

import Login from '@ahws/login';

基本用法

import Login from '@ahws/login';
import bg from 'bg.png';
import log from 'log.png';

const LoginPage = () => {
  const onLogin = (value: any) => {
    console.log(v)
  }

  const getCode = (callback: any) => {
    // 模拟发送验证码
    setTimeout(() => {
      // 发送成功
      callback(true)

      // 发送失败
      // callback(false)
    }, 1000);
  }

  return (
    <Login
      style={{backgroundImage: `url(${bg})`}}
      title={ <img src={log} alt="" /> }
      source="mobile"
      values={{ mobile: 18888888888 }}
      count={60}
      onCode={getCode}
      onLogin={onLogin}
    />
  )
}

export default LoginPage;

Props

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | title | 标题/logo | String/ReactNode | -- | | source | 登录框类型 | username/code / username / mobile | username/code | | count | source 为 mobile 的时候生效，设置倒计时长 | Number | 60 | | values | 登陆默认值，只有初始化以及重置时生效 | Object | -- | | onCode | source 为 mobile 的时候生效，获取验证码后回调 | function(boolean, msg) | -- | | onLogin | 提交表单且数据验证成功后回调事件 | function(values) | -- |

效果图