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	秘密内容是否可见
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

事件	说明
login	点击登录，返回登录表单数据

todos

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