0.0.7 • Published 1 year ago
enn-login-page
npm 地址
gitlab 地址
使用步骤
npm i enn-login-page-vue3或者yarn add enn-login-page-vue3- 在页面中使用该组件
import { LoginPage, LoginForm } from "enn-login-page-vue3"; - 示例
<template>
<LoginPage title="LoRaWAN网络控制平台">
<LoginForm
:if-err="ifError"
:err-msg="ErrorMsg"
v-model:loading="loading"
:has-captcha="false"
hasRemember
v-model:remember="remember"
:formInfo="{
username: '1234241',
password: '123424fe1',
}"
@login="loginhandle"
>
</LoginForm>
</LoginPage>
</template>
<script setup>
import { LoginPage, LoginForm } from "enn-login-page-vue3";
import { ref } from "vue";
const loading = ref(false);
const ErrorMsg = ref("");
const ifError = ref(false);
// const uerRegExp = reactive([
// {
// required: true,
// pattern: "^.{5,16}$",
// message: "请输入5 ~ 16位用户名",
// trigger: ["blur", "change"],
// },
// ]);
const remember = ref(false);
// function onClick(validate, form) {
// validate((valid) => {
// console.log(valid, form);
// });
// }
function loginhandle(form) {
// this.$message.success(`使用${JSON.stringify(form)}进行数据请求`);
loading.value = true;
ifError.value = false;
fetch("/api/login", {
method: "POST",
body: JSON.stringify(form),
})
.then((res) => {
if (res.data.code === 200) {
// ...
loading.value = false;
}
})
.catch(() => {
setTimeout(() => {
ErrorMsg.value = "用户名或密码错误";
ifError.value = true;
loading.value = false;
}, 800);
});
}
</script>
LoginPage API
LoginPage.props
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|
| title | string | 是 | - | 系统登录名称 |
| logo | string | 否 | 1 logo 图 | logo |
| bgImgs | array | 否 | 4 张背景图 | 轮播背景图 |
| bgDuration | number | 否 | 10 | 每张背景图渐变时长 |
LoginPage.slots
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 | 验证码验证规则 |
| hasRemember | boolean | 否 | false | 是否显示记住密码 |
| remember | boolean | 否 | false | 是否记住密码 |
| formInfo | object | 否 | {} | 传入账号密码使用{username:xxxx,password:yyy} |
LoginForm.slot
| 插槽名 | 默认值 | 说明 |
|---|
| btns | 登录按钮 | #btns="{form,validate}"可以获取 form 数据及验证函数 |
| otherBtns | 无 | #otherBtns="{form,validate}"可以获取 form 数据及验证函数 |
validate 调用方式:
validate((valid) => {
console.log(valid, form);
});
LoginForm.events