Login登录

支持多种登录方式切换，内置了几种常见的登录控件，可以灵活组合，也支持和自定义控件配合使用。

引用方式：

  1. import Login from 'ant-design-pro/lib/Login';

详细使用方式请参照：独立使用 pro 组件

代码演示

Login 登录 - 图1

标准登录

Support login with account and mobile number.

  1. import Login from 'ant-design-pro/lib/Login';
  2. import { Alert, Checkbox } from 'antd';
  4. const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;
  6. class LoginDemo extends React.Component {
  7.   state = {
  8.     notice: '',
  9.     type: 'tab2',
  10.     autoLogin: true,
  11.   };
  12.   onSubmit = (err, values) => {
  13.     console.log('value collected ->', {
  14.       ...values,
  15.       autoLogin: this.state.autoLogin,
  16.     });
  17.     if (this.state.type === 'tab1') {
  18.       this.setState(
  19.         {
  20.           notice: '',
  21.         },
  22.         () => {
  23.           if (!err && (values.username !== 'admin' || values.password !== '888888')) {
  24.             setTimeout(() => {
  25.               this.setState({
  26.                 notice: 'The combination of username and password is incorrect!',
  27.               });
  28.             }, 500);
  29.           }
  30.         }
  31.       );
  32.     }
  33.   };
  34.   onTabChange = key => {
  35.     this.setState({
  36.       type: key,
  37.     });
  38.   };
  39.   changeAutoLogin = e => {
  40.     this.setState({
  41.       autoLogin: e.target.checked,
  42.     });
  43.   };
  44.   render() {
  45.     return (
  46.       <div className="login-warp">
  47.         <Login
  48.           defaultActiveKey={this.state.type}
  49.           onTabChange={this.onTabChange}
  50.           onSubmit={this.onSubmit}
  51.         >
  52.           <Tab key="tab1" tab="Account">
  53.             {this.state.notice && (
  54.               <Alert
  55.                 style={{ marginBottom: 24 }}
  56.                 message={this.state.notice}
  57.                 type="error"
  58.                 showIcon
  59.                 closable
  60.               />
  61.             )}
  62.             <UserName name="username" />
  63.             <Password name="password" />
  64.           </Tab>
  65.           <Tab key="tab2" tab="Mobile">
  66.             <Mobile name="mobile" />
  67.             <Captcha onGetCaptcha={() => console.log('Get captcha!')} name="captcha" />
  68.           </Tab>
  69.           <div>
  70.             <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
  71.               Keep me logged in
  72.             </Checkbox>
  73.             <a style={{ float: 'right' }} href="">
  74.               Forgot password
  75.             </a>
  76.           </div>
  77.           <Submit>Login</Submit>
  78.           <div>
  79.             Other login methods
  80.             <span className="icon icon-alipay" />
  81.             <span className="icon icon-taobao" />
  82.             <span className="icon icon-weibo" />
  83.             <a style={{ float: 'right' }} href="">
  84.               Register
  85.             </a>
  86.           </div>
  87.         </Login>
  88.       </div>
  89.     );
  90.   }
  91. }
  93. ReactDOM.render(<LoginDemo />, mountNode);

API

Login

参数说明类型默认值
defaultActiveKey默认激活 tab 面板的 keyString-
onTabChange切换页签时的回调(key) => void-
onSubmit点击提交时的回调(err, values) => void-

Login.Tab

参数说明类型默认值
key对应选项卡的 keyString-
tab选项卡头显示文字ReactNode-

Login.UserName

参数说明类型默认值
name控件标记，提交数据中同样以此为 keyString-
rules校验规则，同 Form getFieldDecorator(id, options) 中 option.rules 的规则)object[]-

除上述属性以外，Login.UserName 还支持 antd.Input 的所有属性，并且自带默认的基础配置，包括 placeholder size prefix 等，这些基础配置均可被覆盖。

Login.Password、Login.Mobile 同 Login.UserName

Login.Captcha

参数说明类型默认值
onGetCaptcha点击获取校验码的回调() => (void | false | Promise)-
countDown倒计时number-
buttonText点击获取校验码的说明文字ReactNode'获取验证码'

除上述属性以外，Login.Captcha 支持的属性与 Login.UserName 相同。

Login.Submit

支持 antd.Button 的所有属性。