enn-login-page

npm 地址

gitlab 地址

包内容

├── index.js
├── package.json
└── src
    ├── imgs
    ├── LoginPage.vue
    └── LoginForm.vue

使用步骤

1. npm i enn-login-page或者yarn add enn-login-page
2. 建议在 main.js 中引入import 'enn-elementui/theme/index.css';
3. 在页面中使用该组件import { LoginPage, LoginForm } from "enn-login-page";
4. 示例

<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 | 秘密内容是否可见 | | hasRegister | boolean | 否 | false | 是否有注册按钮 | | hasCaptcha | boolean | 否 | false | 是否有验证码 | | captchaApi | Promise | 否 | - | 返回验证码图片 | | usernameRules | object | 否 | 参照 el-form-item 的 rules | 用户名验证规则 | | passwordRules | object | 否 | 参照 el-form-item 的 rules | 密码验证规则 | | captchaRules | object | 否 | 参照 el-form-item 的 rules | 验证码验证规则 |

LoginForm.events

| 事件 | 说明 | | -------- | ------------------------------------------------------ | | login | 点击登录，返回登录表单数据 | | register | 点击注册，需要自己处理注册逻辑（跳转页面或更换子组件） |

todos

• [ ] 验证码流程校验
• [x] 验证码样式修改
• [x] 提示信息，表单验证优化
• [ ] 部分宽高值校对