自定义登录页

背景介绍

随着企业的数字化转型和个性化需求的增加，许多公司希望能够在其企业内部系统中实现自定义登录页的功能。自定义登录页是指企业能够根据自身品牌形象、风格和设计需求，自主设计和定制登录页面的外观和用户交互界面。

通过自定义登录页功能，企业可以根据自身需求选择合适的颜色、字体、背景图片等元素，使登录页与企业的品牌形象保持一致。此外，企业还可以添加公司的标志性图标、宣传语等信息，以提升用户对企业的信任和认同感。

自定义登录页功能不仅可以提升企业的品牌形象，还可以提高用户体验。通过设计简洁、直观的用户界面和交互方式，用户可以更快速地完成登录操作，从而提高工作效率和用户满意度。

这篇文章便教你如何开发自定义登录页。

书写 template

<template>
  <div class="wrapper">
    <div class="login-wrapper">
      <fx-login v-bind="options"></fx-login>
    </div>
  </div>
</template>

书写 script

我们先来理一下需求：

1. 登录组件默认是英文。

2. 不展示扫码。

3. 默认展示激活的页签是账号登录。

4. 在账号登录中默认展示的是邮箱登录。

5. 邮箱登录不支持修改密码，手机号支持修改密码。

6. 主题色为蓝色。

7. 企业列表只展示 5 个企业

8. 更多登录增加自定义的登录方式

9. 不展示登录协议

根据上述的步骤，我们组织逻辑如下：

<script>
export default {
  data() {
    return {
      options: {
        lang: "en",
        qrcode: false,
        activeTabIndex: 0,
        activeLoginType: "email",
        changePasswordTypes: ["phone"],
        themeColor: "#0c6cff",
        filterEnterpriseList: this.filterEnterpriseList,
        moreLoginTypes: [
          {
            name: "自定义更多登录",
            href: "http://www.baidu.com",
            logo: ""
          }
        ],
        showAgreement: false
      }
    };
  },
  methods: {
    filterEnterpriseList(data) {
      return data.slice(0, 5);
    }
  }
};
</script>

添加样式

<style lang="less" scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .login-wrapper {
    padding: 16px;
    border-radius: 4px;
    background-color: #fff;
  }
}
</style>

最终全部代码如下

<template>
  <div class="wrapper">
    <div class="login-wrapper">
      <fx-login v-bind="options"></fx-login>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: {
        lang: "en",
        qrcode: false,
        activeTabIndex: 0,
        activeLoginType: "email",
        changePasswordTypes: ["phone"],
        themeColor: "#0c6cff",
        filterEnterpriseList: this.filterEnterpriseList,
        moreLoginTypes: [
          {
            name: "自定义更多登录",
            href: "http://www.baidu.com",
            logo: ""
          }
        ],
        showAgreement: false
      }
    };
  },
  methods: {
    filterEnterpriseList(data) {
      return data.slice(0, 5);
    }
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .login-wrapper {
    padding: 16px;
    border-radius: 4px;
    background-color: #fff;
  }
}
</style>

实际的展示效果