自定义登录
# 自定义登录页
# 背景介绍
随着企业的数字化转型和个性化需求的增加,许多公司希望能够在其企业内部系统中实现自定义登录页的功能。自定义登录页是指企业能够根据自身品牌形象、风格和设计需求,自主设计和定制登录页面的外观和用户交互界面。
通过自定义登录页功能,企业可以根据自身需求选择合适的颜色、字体、背景图片等元素,使登录页与企业的品牌形象保持一致。此外,企业还可以添加公司的标志性图标、宣传语等信息,以提升用户对企业的信任和认同感。
自定义登录页功能不仅可以提升企业的品牌形象,还可以提高用户体验。通过设计简洁、直观的用户界面和交互方式,用户可以更快速地完成登录操作,从而提高工作效率和用户满意度。
这篇文章便教你如何开发自定义登录页。
# 书写 template
<template>
<div class="wrapper">
<div class="login-wrapper">
<fx-login v-bind="options"></fx-login>
</div>
</div>
</template>
# 书写 script
我们先来理一下需求:
登录组件默认是英文。
不展示扫码。
默认展示激活的页签是账号登录。
在账号登录中默认展示的是邮箱登录。
邮箱登录不支持修改密码,手机号支持修改密码。
主题色为蓝色。
企业列表只展示 5 个企业
更多登录增加自定义的登录方式
不展示登录协议
根据上述的步骤,我们组织逻辑如下:
<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>