@antdp/user-login

@antdp/user-login

登录界面

Installation

$ npm i @antdp/user-login --save

基本使用

import React, { useRef } from 'react';
import UserLogin from '@antdp/user-login';

const Demo= (props) => {
  return (
    <UserLogin
      warpStyle={{minHeight:"300px"}}
      projectName="Ant Design"
      loading={props.loading}
      onFinish={(values,submitType) => {
        console.log("打印保存参数---->",value,submitType)
      }}
      onSend={() => console.log('短信验证回调')}
      formBtns={[
        {
          label: '登录',
          attr: {
            type: 'primary',
            htmlType: 'submit',
            style: {
              marginRight: 20,
            },
          },
        },
        {
          label: '重置',
          attr: {
            type: 'primary',
          },
        },
      ]}
    />
  )
}
export default Demo;

账号登录

import React, { useRef } from 'react';
import UserLogin from '@antdp/user-login';

const Demo= (props) => {
  return (
    <UserLogin
      warpStyle={{minHeight:"300px"}}
      projectName="Ant Design"
      loading={props.loading}
      onFinish={(values) => {
       console.log("打印保存参数---->",values)
      }}
      type="account"
      formBtns={[
        {
          label: '登录',
          attr: {
            type: 'primary',
            htmlType: 'submit',
            style: {
              marginRight: 20,
            },
          },
        },
        {
          label: '重置',
          attr: {
            type: 'primary',
          },
        },
      ]}
    />
  )
}
export default Demo;

手机号登录

import React, { useRef } from 'react';
import UserLogin from '@antdp/user-login';

const Demo= (props) => {
  return (
    <UserLogin
      warpStyle={{minHeight:"300px"}}
      projectName="Ant Design"
      loading={props.loading}
      onFinish={(values) => {
       console.log("打印保存参数---->",values)
      }}
      type="phone"
      onSend={() => console.log('短信验证回调')}
      formBtns={[
        {
          label: '登录',
          attr: {
            type: 'primary',
            htmlType: 'submit',
            style: {
              marginRight: 20,
            },
          },
        },
        {
          label: '重置',
          attr: {
            type: 'primary',
          },
        },
      ]}
    />
  )
}
export default Demo;

API

该组件依赖

• antd Button
• antd Radio
• antd Form

参数	说明	类型	默认值
logo	logo	string	-
projectName	项目名称	string	-
className	登陆样式	string	-
type	登录类型	account | phone | account
children	自定义内容	React.ReactNode	-
formItems	账号登录设置的formItem	({ render?: React.ReactNode, inputProps?: InputProps } & FormItemProps)[]	-
formBtns	表单操作按钮	{ label?: React.ReactNode, attr?: ButtonProps }[]	-
loading	加载状态	boolean	-
onFinish	表单提交	(value: any, submitType: "account" | "phone") => void	-
phoneFormItems	手机号登录设置的 formItem 项	UserLoginProps["formItems"]	-
phoneCodeProps	手机号FormItem 属性	FormItemProps	-
onSend	自定义form表单内渲染	() => void	-
warpStyle	外层样式	React.CSSProperties	-
titleStyle	标题样式	React.CSSProperties	-