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 ->', { ...values, autoLogin: this.state.autoLogin });
  14.     if (this.state.type === 'tab1') {
  15.       this.setState({
  16.         notice: '',
  17.       }, () => {
  18.         if (!err && (values.username !== 'admin' || values.password !== '888888')) {
  19.           setTimeout(() => {
  20.             this.setState({
  21.               notice: 'The combination of username and password is incorrect!',
  22.             });
  23.           }, 500);
  24.         }
  25.       });
  26.     }
  27.   }
  28.   onTabChange = (key) => {
  29.     this.setState({
  30.       type: key,
  31.     });
  32.   }
  33.   changeAutoLogin = (e) => {
  34.     this.setState({
  35.       autoLogin: e.target.checked,
  36.     });
  37.   }
  38.   render() {
  39.     return (
  40.       <Login
  41.         defaultActiveKey={this.state.type}
  42.         onTabChange={this.onTabChange}
  43.         onSubmit={this.onSubmit}
  44.       >
  45.         <Tab key="tab1" tab="Account">
  46.           {
  47.             this.state.notice &&
  48.             <Alert style={{ marginBottom: 24 }} message={this.state.notice} type="error" showIcon closable />
  49.           }
  50.           <UserName name="username" />
  51.           <Password name="password" />
  52.         </Tab>
  53.         <Tab key="tab2" tab="Mobile">
  54.           <Mobile name="mobile" />
  55.           <Captcha onGetCaptcha={() => console.log('Get captcha!')} name="captcha" />
  56.         </Tab>
  57.         <div>
  58.           <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>Keep me logged in</Checkbox>
  59.           <a style={{ float: 'right' }} href="">Forgot password</a>
  60.         </div>
  61.         <Submit>Login</Submit>
  62.         <div>
  63.           Other login methods
  64.           <span className="icon icon-alipay" />
  65.           <span className="icon icon-taobao" />
  66.           <span className="icon icon-weibo" />
  67.           <a style={{ float: 'right' }} href="">Register</a>
  68.         </div>
  69.       </Login>
  70.     );
  71.   }
  72. }
  74. 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 的规则-cn)object[]-

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

Login.Password、Login.Mobile 同 Login.UserName

Login.Captcha

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

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

Login.Submit

支持 antd.Button 的所有属性。