自定义登录
# FxLogin 组件
用于平台自定义登录页。
# 功能描述
此组件配合自定义域名可以实现企业灵活修改登录页的样式和登录方式。
# 参数
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
qrcode | 是否显示二维码登录的页签 | Boolean | — | true |
account | 是否显示账号登录的页签 | Boolean | — | true |
more | 是否显示更多登录的页签 | Boolean | — | true |
activeTabIndex | 默认激活的页签,值为页签的下标 | Number | — | 0 |
accountLoginTypes | 账号登录页签下的存在的登录方式 | Array | phone | ['phone', 'email', 'account'] |
activeLoginType | 账号登录页签默认展示的登录方式 | String | — | 'phone' |
moreLoginTypes | 在‘更多登录’里面添加登录方式 | Array | [] | |
changePasswordTypes | 手机、邮箱登录是否展示“忘记密码”按钮 | Array | 'phone' | 'email' | ['phone', 'email'] |
lang | 登录页的多语 | String | 'zh-CN' | 'zh-TW' | 'en' | ‘zh-CN’ |
locationOrigin | 自定义发送网络的域名。例如:获取验证码,登录等接口的域名。 | String | — | 自定义域名xxx.my.fxiaoke.com 时默认值为:www.fxiaoke.com 个性化域名 xxx.xx.xx 时默认值为:location.hostname |
twoFactor | 是否开启双因素登录 | Boolean | — | false |
themeColor | 登录组件的主题色 | String | — | '#ff8000' |
showAgreement | 是否展示登录协议 | Boolean | — | true |
filterEnterpriseList | 在渲染企业列表前调用,对企业列的数据进行过滤 | Function(data: array) | — | null |
moreLoginType参数说明
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
name | 自定义登录项的名称 | String | — | — |
logo | 自定义登录项左侧的 logo | String | — | — |
href | 点击自定义登录项后跳转的 URL | String | — | — |
style | 自定义更多登录项的样式 | String | — | — |
filterEnterpriseList回调函数说明
输入正确的账号和密码点击确定后,渲染企业列表前调用,对企业列的数据进行过滤。
钩子接受一个参数:
data: Array
- 企业列表数据
函数执行完成之后,确保 return 一个 data
出来。
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
enterpriseName | 企业的名称 | String | — | — |
employeeStatus | 当前账号在改企业的状态:1:激活中、2:停用、3:禁止登录、4:审核中 | Number | — | — |
isNeedScanQRCode | 是否需要扫码登录 | Boolean | — | — |
type | 企业的类型:1:上游企业,2:下游企业 | Number | 1 | 2 | — |
downloadEnterprise | 上游企业的下游企业 | Array | — |
# 代码示例
组件通过 Vue.component
全局注册,可以直接在代码中使用。
<template>
<div class="wrapper">
<div class="login-wrapper">
<fx-login></fx-login>
</div>
</div>
</template>
<script>
export default {};
</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>
效果展示:
# 注意
fx-login组件只能在页面设计器类型为自定义登录页中使用,其他页面设计器类型使用无效。 在登录页不可以使用其他 UI 组件。