login-page-enn

npm 地址

包内容

├── index.js
├── package.json
└── src
    ├── LoginPage.vue
    └── FormEle.vue

使用步骤

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

<template>
  <div id="app">
    <LoginPage>
      <LoginForm :loading="loading" @login="login" />
    </LoginPage>
  </div>
</template>

<script>
import { LoginPage, LoginForm } from "login-page-enn";
export default {
  components: {
    LoginPage,
    LoginForm,
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    login(form) {
      this.loading = true;
      fetch("/api/login", {
        method: "POST",
        body: JSON.stringify(form),
      }).then((res) => {
        if (res.data.code === 200) {
          // ...
          this.loading = false;
        }
      });
    },
  },
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
}
</style>

LoginPage API

LoginPage.props

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ----------- | ------ | ---- | ------------------------------------------------------------------------------- | ------------------------------------ | | title | string | 是 | - | 系统登录名称 | | logo | string | 是 | | logo | | background | string | 是 | | 上半部背景图，可被 topStyle 样式覆盖 | | topStyle | object | 否 | - | 可对登录页部分的上半部分定制化样式 | | bottomStyle | object | 否 | - | 可对登录页部分的下半部分定制化样式 |

LoginPage.slots

| 插槽名 | 默认值 | 说明 | | ------ | ---------------- | -------- | | form | /src/FormEle.vue | 登录表单 |

LoginForm API

LoginForm.props

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ---------- | ------- | ---- | ------ | ------------------ | | ifCaptcha | boolean | 否 | false | 是否有验证码 | | captchaApi | Promise | 否 | - | 返回验证码图片 | | loading | boolean | 否 | - | 登录按钮的 loading |

LoginForm.events

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