enn-login-page-v3
使用步骤
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
事件 | 说明 |
---|---|
login | 点击登录,返回登录表单数据 |