UmiJs使用ProComponents-login

最新推荐文章于 2024-05-20 10:06:00 发布

ykmk

最新推荐文章于 2024-05-20 10:06:00 发布

阅读量802

点赞数

分类专栏： umijs 文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/weixin_50950569/article/details/127452345

版权

umijs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何使用Ant Design Pro的Login组件。通过一个具体的React登录页面实例，展示了如何配置账号密码登录和手机号登录，包括图标、表单元素、验证规则以及自动登录和忘记密码功能。同时，涉及到了umi库的useModel钩子来管理和更新全局状态，以及利用Ant Design的Tabs组件切换登录方式。

摘要由CSDN通过智能技术生成

ProComponents组件高度封装，其中的login组件使用起来一头雾水

import { LockOutlined, MobileOutlined, UserOutlined, } from '@ant-design/icons';
import { LoginForm, ProFormCaptcha, ProFormCheckbox, ProFormText, } from '@ant-design/pro-components';
import { message, Tabs } from 'antd';
import { useState } from 'react';
import React from 'react';
import { useModel, history } from 'umi';
const iconStyles = {
    marginInlineStart: '16px',
    color: 'rgba(0, 0, 0, 0.2)',
    fontSize: '24px',
    verticalAlign: 'middle',
    cursor: 'pointer',
};
export default () => {
    const [loginType, setLoginType] = useState('account');
    // 先从全局获得初始值
    const { setInitialState } = useModel('@@initialState');
    // 只有通过校验之后才会触发这个方法
    const onFinish = (values) => {
        console.log('Success:', values);
        //1.修改全局的initialstate,让layout有机会进入主面板  
        setInitialState({ //通过这个函数传值过去
            isLogin: true,
            userInfo: values
        })
        //2.实现路由跳转
        history.push('/access')
    };
    //return之前还有一个密码输入错误的自定义函数，我给删掉了
    return (
        <div className='login'>
            <LoginForm
                onFinish={onFinish}
                logo="https://github.githubassets.com/images/modules/logos_page/Octocat.png"
                title="Github"
                subTitle="全球最大的代码托管平台"
            >
                <Tabs centered activeKey={loginType} onChange={(activeKey) => setLoginType(activeKey)}>
                    <Tabs.TabPane key={'account'} tab={'账号密码登录'} />
                    <Tabs.TabPane key={'phone'} tab={'手机号登录'} />
                </Tabs>
                {loginType === 'account' && (<>
                    <ProFormText name="username"
                        fieldProps={{
                            size: 'large',
                            prefix: <UserOutlined className={'prefixIcon'} />,
                        }}
                        placeholder={'用户名: admin or user'} rules={[
                            {
                                required: true,
                                message: '请输入用户名!',
                            },
                        ]} />
                    <ProFormText.Password name="password"
                        fieldProps={{
                            size: 'large',
                            prefix: <LockOutlined className={'prefixIcon'} />,
                        }} placeholder={'密码: ant.design'} rules={[
                            {
                                required: true,
                                message: '请输入密码！',
                            },
                        ]} />
                </>)}
                {loginType === 'phone' && (<>
                    <ProFormText fieldProps={{
                        size: 'large', prefix: <MobileOutlined className={'prefixIcon'} />,
                    }} name="mobile" placeholder={'手机号'} rules={[
                        {
                            required: true,
                            message: '请输入手机号！',
                        },
                        {
                            pattern: /^1\d{10}$/,
                            message: '手机号格式错误！',
                        },
                    ]} />
                    <ProFormCaptcha fieldProps={{
                        size: 'large',
                        prefix: <LockOutlined className={'prefixIcon'} />,
                    }} captchaProps={{
                        size: 'large',
                    }} placeholder={'请输入验证码'} captchaTextRender={(timing, count) => {
                        if (timing) {
                            return `${count} ${'获取验证码'}`;
                        }
                        return '获取验证码';
                    }} name="captcha" rules={[
                        {
                            required: true,
                            message: '请输入验证码！',
                        },
                    ]} onGetCaptcha={async () => {
                        message.success('获取验证码成功！验证码为：1234');
                    }} />
                </>)}
                <div style={{
                    marginBlockEnd: 24,
                }}>
                    <ProFormCheckbox noStyle name="autoLogin">
                        自动登录
                    </ProFormCheckbox>
                    <a style={{
                        float: 'right',
                    }}>
                        忘记密码
                    </a>
                </div>
            </LoginForm>
        </div>);
};