Ant Design Pro修改登录

最新推荐文章于 2024-01-09 17:15:15 发布

我是 · 闪电

最新推荐文章于 2024-01-09 17:15:15 发布

阅读量764

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_58050016/article/details/128485999

版权

其他登录方式部分

LoginForm的actions属性

actions={[
         <FormattedMessage
           key="loginWith"
           id="pages.login.loginWith"
           defaultMessage="其他登录方式"
           />,
         <AlipayCircleOutlined key="AlipayCircleOutlined" className={styles.icon} />,
         <TaobaoCircleOutlined key="TaobaoCircleOutlined" className={styles.icon} />,
         <WeiboCircleOutlined key="WeiboCircleOutlined" className={styles.icon} />,
        ]}

手机号登录部分

jsx部分选项部分 LoginForm > Tabs > Tabs.TabPane

<Tabs.TabPane
     key="mobile"
     tab={intl.formatMessage({
     id: 'pages.login.phoneLogin.tab',
     defaultMessage: '手机号登录',
    })}
    />

卡部分 LoginForm > 表达式

{status === 'error' && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
          {type === 'mobile' && (
            <>
              <ProFormText
                fieldProps={{
                  size: 'large',
                  prefix: <MobileOutlined className={styles.prefixIcon} />,
                }}
                name="mobile"
                placeholder={intl.formatMessage({
                  id: 'pages.login.phoneNumber.placeholder',
                  defaultMessage: '手机号',
                })}
                rules={[
                  {
                    required: true,
                    message: (
                      <FormattedMessage
                        id="pages.login.phoneNumber.required"
                        defaultMessage="请输入手机号！"
                      />
                    ),
                  },
                  {
                    pattern: /^1\d{10}$/,
                    message: (
                      <FormattedMessage
                        id="pages.login.phoneNumber.invalid"
                        defaultMessage="手机号格式错误！"
                      />
                    ),
                  },
                ]}
              />
              <ProFormCaptcha
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={styles.prefixIcon} />,
                }}
                captchaProps={{
                  size: 'large',
                }}
                placeholder={intl.formatMessage({
                  id: 'pages.login.captcha.placeholder',
                  defaultMessage: '请输入验证码',
                })}
                captchaTextRender={(timing, count) => {
                  if (timing) {
                    return `${count} ${intl.formatMessage({
                      id: 'pages.getCaptchaSecondText',
                      defaultMessage: '获取验证码',
                    })}`;
                  }

                  return intl.formatMessage({
                    id: 'pages.login.phoneLogin.getVerificationCode',
                    defaultMessage: '获取验证码',
                  });
                }}
                name="captcha"
                rules={[
                  {
                    required: true,
                    message: (
                      <FormattedMessage
                        id="pages.login.captcha.required"
                        defaultMessage="请输入验证码！"
                      />
                    ),
                  },
                ]}
                onGetCaptcha={async (phone) => {
                  const result = await getFakeCaptcha({
                    phone,
                  });

                  if (result === false) {
                    return;
                  }

                  message.success('获取验证码成功！验证码为：1234');
                }}
              />
            </>
          )}