0.0.12 • Published 2 years ago
enn-login-page
npm 地址
gitlab 地址
包内容
├── index.js
├── package.json
└── src
├── imgs
├── LoginPage.vue
└── LoginForm.vue
使用步骤
npm i enn-login-page或者yarn add enn-login-page- 建议在 main.js 中引入
import 'enn-elementui/theme/index.css'; - 在页面中使用该组件
import { LoginPage, LoginForm } from "enn-login-page"; - 示例
<template>
<LoginPage title="智能压力检测系统">
<LoginForm
:ifErr="ifErr"
:errMsg="errMsg"
:loading="loading"
:usernameRules="uerRegExp"
@login="login"
/>
</LoginPage>
</template>
<script>
import { LoginPage, LoginForm } from "enn-login-page";
export default {
components: {
LoginPage,
LoginForm,
},
data() {
return {
loading: false,
errMsg: "",
ifErr: false,
uerRegExp: [
// 正则示例
{
required: true,
pattern: "^.{5,16}$",
message: "请输入5 ~ 16位密码",
trigger: ["blur", "change"],
},
],
};
},
methods: {
login(form) {
this.loading = true;
this.ifErr = false;
fetch("/api/login", {
method: "POST",
body: JSON.stringify(form),
})
.then((res) => {
if (res.data.code === 200) {
// ...
this.loading = false;
}
})
.catch(() => {
setTimeout(() => {
this.errMsg = "用户名或密码错误";
this.ifErr = true;
this.loading = false;
}, 800);
});
},
},
};
</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 | 验证码验证规则 |
| 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
todos