login-page-enn v0.0.4

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

LoginForm API

LoginForm.props

LoginForm.events