0.0.3 • Published 2 years ago
enn-login-page-v3
npm 地址
gitlab 地址
使用步骤
npm i enn-login-page-v3- 在页面中使用该组件
import { LoginPage, LoginForm } from "enn-login-page-v3"; - 示例
<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 调用方式:
validate((valid) => {
console.log(valid, form);
});
LoginForm.events