Login登录
支持多种登录方式切换,内置了几种常见的登录控件,可以灵活组合,也支持和自定义控件配合使用。
引用方式:
import Login from 'ant-design-pro/lib/Login';
详细使用方式请参照:独立使用 pro 组件
代码演示
import Login from 'ant-design-pro/lib/Login';
import { Alert, Checkbox } from 'antd';
const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;
class LoginDemo extends React.Component {
state = {
notice: '',
type: 'tab2',
autoLogin: true,
};
onSubmit = (err, values) => {
console.log('value collected ->', {
...values,
autoLogin: this.state.autoLogin,
});
if (this.state.type === 'tab1') {
this.setState(
{
notice: '',
},
() => {
if (!err && (values.username !== 'admin' || values.password !== '888888')) {
setTimeout(() => {
this.setState({
notice: 'The combination of username and password is incorrect!',
});
}, 500);
}
}
);
}
};
onTabChange = key => {
this.setState({
type: key,
});
};
changeAutoLogin = e => {
this.setState({
autoLogin: e.target.checked,
});
};
render() {
return (
<div className="login-warp">
<Login
defaultActiveKey={this.state.type}
onTabChange={this.onTabChange}
onSubmit={this.onSubmit}
>
<Tab key="tab1" tab="Account">
{this.state.notice && (
<Alert
style={{ marginBottom: 24 }}
message={this.state.notice}
type="error"
showIcon
closable
/>
)}
<UserName name="username" />
<Password name="password" />
</Tab>
<Tab key="tab2" tab="Mobile">
<Mobile name="mobile" />
<Captcha onGetCaptcha={() => console.log('Get captcha!')} name="captcha" />
</Tab>
<div>
<Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
Keep me logged in
</Checkbox>
<a style={{ float: 'right' }} href="">
Forgot password
</a>
</div>
<Submit>Login</Submit>
<div>
Other login methods
<span className="icon icon-alipay" />
<span className="icon icon-taobao" />
<span className="icon icon-weibo" />
<a style={{ float: 'right' }} href="">
Register
</a>
</div>
</Login>
</div>
);
}
}
ReactDOM.render(<LoginDemo />, mountNode);
API#
Login#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
defaultActiveKey | 默认激活 tab 面板的 key | String | - |
onTabChange | 切换页签时的回调 | (key) => void | - |
onSubmit | 点击提交时的回调 | (err, values) => void | - |
Login.Tab#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
key | 对应选项卡的 key | String | - |
tab | 选项卡头显示文字 | ReactNode | - |
Login.UserName#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 控件标记,提交数据中同样以此为 key | String | - |
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 的所有属性。