# enn-login-page-v3

> vue3版本的登录页

Latest version **0.0.3** (published 2022-06-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install enn-login-page-v3
pnpm add enn-login-page-v3
yarn add enn-login-page-v3
bun add enn-login-page-v3
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-06-08 |
| First published | 2022-05-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 2.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jiangkewen |

## Links

- npm: https://www.npmjs.com/package/enn-login-page-v3
- npm.io page: https://npm.io/package/enn-login-page-v3

## Dependencies (2)

- [element-plus](https://npm.io/package/element-plus.md) ^2.2.2
- [@element-plus/icons-vue](https://npm.io/package/@element-plus/icons-vue.md) ^2.0.1

## Recent versions

- 0.0.3 (latest) — 2022-06-08
- 0.0.1 — 2022-05-30

## README

# enn-login-page-v3

[npm 地址](https://www.npmjs.com/package/enn-login-page-v3)

[gitlab 地址](http://10.0.3.8/jiangkewen/enn-login-page-v3)

## 使用步骤

1. `npm i enn-login-page-v3`
2. 在页面中使用该组件`import { LoginPage, LoginForm } from "enn-login-page-v3";`
3. 示例

```vue
<template>
  <LoginPage title="LoRaWAN网络控制平台">
    <LoginForm
      :if-err="ifError"
      :err-msg="ErrorMsg"
      v-model:loading="loading"
      :has-captcha="false"
      @login="loginhandle"
    >
      <template #otherBtns="{ validate, ref, form }">
        <el-col :span="24">
          <el-button
            class="login-btn"
            type="primary"
            style="width: 100%"
            @click="onClick(validate, form, ref)"
            >注册</el-button
          >
        </el-col>
      </template>
    </LoginForm>
  </LoginPage>
</template>

<script setup>
import { LoginPage, LoginForm } from 'enn-login-page-v3'
import { ref } from 'vue'
const ifError = ref(false)
const ErrorMsg = ref('')
const loading = ref(false)

// 登录逻辑
const loginhandle = () => {}
// 注册逻辑，如果有的话
const onClick = () => {}
</script>
```

## LoginPage API

### LoginPage.props

| 参数       | 类型   | 必填 | 默认值     | 说明               |
| ---------- | ------ | ---- | ---------- | ------------------ |
| title      | string | 是   | -          | 系统登录名称       |
| logo       | string | 否   | 1 logo 图  | logo               |
| bgImgs     | array  | 否   | 4 张背景图 | 轮播背景图         |
| bgDuration | number | 否   | 10         | 每张背景图渐变时长 |

### LoginPage.slots

| 插槽名   | 默认值           | 说明     |
| -------- | ---------------- | -------- |
| 默认插槽 | /src/FormEle.vue | 登录表单 |

## LoginForm API

### LoginForm.props

| 参数          | 类型    | 必填 | 默认值                     | 说明                     |
| ------------- | ------- | ---- | -------------------------- | ------------------------ |
| loading       | boolean | 否   | -                          | 登录按钮的 loading       |
| ifErr         | boolean | 否   | false                      | 是否显示登陆失败提示     |
| errMsg        | string  | 否   | ''                         | 登陆失败提示语           |
| errCloseable  | boolean | 否   | true                       | 登陆失败提示语是否可关闭 |
| showPassword  | boolean | 否   | true                       | 秘密内容是否可见         |
| hasCaptcha    | boolean | 否   | false                      | 是否有验证码             |
| captchaApi    | Promise | 否   | -                          | 返回验证码图片           |
| usernameRules | object  | 否   | 参照 el-form-item 的 rules | 用户名验证规则           |
| passwordRules | object  | 否   | 参照 el-form-item 的 rules | 密码验证规则             |
| captchaRules  | object  | 否   | 参照 el-form-item 的 rules | 验证码验证规则           |

## LoginForm.slot

| 插槽名    | 默认值   | 说明                                                     |
| --------- | -------- | -------------------------------------------------------- |
| btns      | 登录按钮 | #btns="{form,validate}"可以获取 form 数据及验证函数      |
| otherBtns | 无       | #otherBtns="{form,validate}"可以获取 form 数据及验证函数 |

validate 调用方式:

```js
validate((valid) => {
  console.log(valid, form);
});
```

## LoginForm.events

| 事件  | 说明                       |
| ----- | -------------------------- |
| login | 点击登录，返回登录表单数据 |

---
_Source: https://npm.io/package/enn-login-page-v3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._