# loginComponent

**Repository Path**: Mike_Yedo/login-component

## Basic Information

- **Project Name**: loginComponent
- **Description**: 打包登录组件，可以通过npm导入
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-22
- **Last Updated**: 2021-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 登录组件使用流程

## 开发阶段

```
yarn install

yarn serve
```

## 发布阶段

```
// mac or  linux

./deploy.sh

// 在不支持 shell 的win下需要手动执行 ./deploy.sh 的所有命令
// 如果装有git bash， 可以直接双击运行
```

## 使用阶段（手机端登录和web端登录）

> 使用web组件：

```tsx
import '@ibsaas/rd-login/rd-login.css';

const { LoginWebComponent: loginWeb } = LoginComponent;

Vue.use(loginWeb);

// 在模板中使用组件的传值
<LoginWeb/>
```

> 使用mobile组件：

```tsx
import '@ibsaas/rd-login/rd-login.css';

const { LoginWebComponent: loginMobile } = LoginComponent;

Vue.use(loginMobile);

// 在模板中使用组件的传值
<LoginMobile/> 
```

## 可使用参数

|                              |  类型   | 默认值 | 备注                                                      |
| :--------------------------: | :-----: | :----: | --------------------------------------------------------- |
|          submitText          | String  |  提交  | 通过传入此字段值更改提交按钮文案                          |
|           linkFlag           | Boolean | false  | 默认不是外链登录，有需求可以传true，无需求默认即可        |
|       notUseLoginPost        | Boolean | false  | 默认使用登录请求，组件中封装了登录请求，若不需要可以禁用  |
|      useLoginSuccessMsg      | Boolean |  true  | 默认使用登录成功的toast弹窗，这个可以忽略，个性化需求需要 |
| useLoadingButton(Mobile独有) | Boolean |  true  | 默认有登录后loading， 如若有个性化需求，可以传false禁用   |
|        defaultAccount(Web密码登录)         | String  |   ''   | 用于处理记住密码，可以传参 用户账号 并填充                |
|       defaultPassword(Web密码登录)         | String  |   ''   | 用于处理记住密码，可以传参 用户密码 并填充                |
|       isCheckedRemember(Web密码登录)       | String  |   ''   | 用于用户已经记住密码后的记住密码回显                |



## 可使用回调

|             | 类型            | 备注                                                         |
| ----------- | --------------- | ------------------------------------------------------------ |
| beforeLogin | (mobile) object | 监听点击提交按钮后 ->  在请求接口前登陆组件传出请求的所有参数 |
| beforeLogin | (web)  object   | 监听点击提交按钮后 ->  在请求接口前登陆输入框内容            |
| afterLogin  | object          | 登录之后接口返回的数据，注意是接口的整个返回体，包括 { code: '', msg: '', data: ''} |



# 登录组件本地测试

## 在文件components/index.js中注册这两个组件

```tsx
Vue.use(LoginWebComponent);
Vue.use(LoginMobileComponent);
```



## 在yarn serve后访问入口文件即可（vue.config.js）

> 例如，测试loginWeb的地址为：index.web.html -> localhost:8080/index.web.html

可以通过更改/src/login-web/文件夹下的内容测试相关的使用效果

# 注意

> 组件有两个变量挂在到 Vue 上了, 可能有冲突

```tsx
// 全局的登录相关加密方法
Vue.prototype.$loginUtils = utils;
// 全局的路径存放
Vue.prototype.globalProcessData = globalProcessData;
```