@antdp/user-login NPM

@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

该组件依赖

参数	说明	类型	默认值
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`	-