@ahws/login NPM

react后台登录页封装

基于 antd 后台登录页面封装。依赖 antd, react-captcha-code。支持（账号/密码/验证码、账号/密码、手机号/验证码）三种方式。

安装

npm install --save @ahws/login

引入

import Login from '@ahws/login';

基本用法

import Login from '@ahws/login';
import bg from 'bg.png';
import log from 'log.png';

const LoginPage = () => {
  const onLogin = (value: any) => {
    console.log(v)
  }

  const getCode = (callback: any) => {
    // 模拟发送验证码
    setTimeout(() => {
      // 发送成功
      callback(true)

      // 发送失败
      // callback(false)
    }, 1000);
  }

  return (
    <Login
      style={{backgroundImage: `url(${bg})`}}
      title={ <img src={log} alt="" /> }
      source="mobile"
      values={{ mobile: 18888888888 }}
      count={60}
      onCode={getCode}
      onLogin={onLogin}
    />
  )
}

export default LoginPage;

Props

参数	说明	类型	默认值
title	标题/logo	String/ReactNode	--
source	登录框类型	`username/code` / `username` / `mobile`	`username/code`
count	source 为 mobile 的时候生效，设置倒计时长	Number	60
values	登陆默认值，只有初始化以及重置时生效	Object	--
onCode	source 为 mobile 的时候生效，获取验证码后回调	function(boolean, msg)	--
onLogin	提交表单且数据验证成功后回调事件	function(values)	--