Used to customize the new login page, including login methods, themes, languages, and agreement display.

Component/API

Attributes

Parameter	Description	Type	Optional Values	Default
tabs	Configures the login tabs and their display order	LoginTab[]	contact | enterprise | qrCodeLogin	All supported tabs
defaultTab	Specifies the login tab displayed by default	LoginTab	Same as tabs	contact
contactType	Configures the supported contact login methods and their display order	LoginContactType[]	password | code	['password', 'code']
lang	Sets the display language of the login component	FxLoginv2Language	zh | zh-TW | en	Not set; uses the current language
themeColor	Sets the page theme color and writes it to the root page theme variable	String	CSS color value, such as #189DFF or rgb()	Does not override the default theme color
showForgotPassword	Whether to show the Forgot Password entry	Boolean	—	true
showAgreement	Whether to show the service agreement and privacy policy. When set to false, service agreement checkbox validation is skipped	Boolean	—	true
agreementConfig	Customizes the names and links of the service agreement and privacy policy	AgreementConfig	—	Uses the default configuration
filterEnterpriseList	Filters the enterprise list; the return value is the final list to display	Function	—	Displays the default enterprise list
filterMoreLoginTypes	Filters and sorts other login methods; the return value is the final list to display	Function	—	Displays all available other login methods

Configuration Rules

• tabs can be empty. When empty, the login form area is hidden; other login methods are shown only when available, and defaultTab is ignored.
• When tabs is not empty, defaultTab should preferably be one of its items. If it is not included, the first item in tabs is used.
• contactType takes effect only when contact is included. At least one item should be configured. When only one item is configured, the login method switch is hidden; an empty array is treated as password login.
• H5 automatically filters out qrCodeLogin. When the default tab is unavailable, the first remaining tab is used. When no tabs remain, the login form area is hidden.
• High-code H5 pages do not show other login methods, so filterMoreLoginTypes has no effect.
• When showAgreement is false, only service agreement checkbox validation is skipped. Phone-number verification-code login still requires separate confirmation to agree to receive verification codes.

agreementConfig

agreementConfig: {
  serviceAgreement: {
    name: "客户服务协议",
    url: "https://example.com/zh/service",
  },
  privacyPolicy: {
    name: "客户隐私政策",
    url: "https://example.com/zh/privacy",
  },
}

Property	Description	Type	Default
serviceAgreement	Custom service agreement. The default service agreement is used when this is not configured	AgreementItem	—
serviceAgreement.name	Display name of the service agreement	String	—
serviceAgreement.url	URL opened for the service agreement	String	—
privacyPolicy	Custom privacy policy. The default privacy policy is used when this is not configured	AgreementItem	—
privacyPolicy.name	Display name of the privacy policy	String	—
privacyPolicy.url	URL opened for the privacy policy	String	—

filterEnterpriseList

When it is not configured, the default enterprise list is displayed. When configured, the callback runs before the enterprise list is rendered. Its return value is used for rendering and participates in automatic selection when there is only one enterprise.

filterEnterpriseList(
  enterprises: Enterprise[]
): Enterprise[]

Property	Description	Type	Default
enterpriseAccount	Enterprise account	String	—
enterpriseName	Enterprise name	String	—
employeeStatus	Enterprise member status	Number	—
isNeedScanQRCode	Whether QR code login is required	Boolean	—
type	Enterprise type	Number	—
downStreamEnterpriseId	Downstream enterprise identifier	String (optional)	—
downloadEnterprise	Downstream enterprise list	Enterprise[] (optional)	—
enterpriseId	Enterprise identifier	String (optional)	—

filterMoreLoginTypes

When it is not configured, all available other login methods are displayed. When configured, the callback receives the complete list, and its return value determines the displayed items and their order.

filterMoreLoginTypes(
  items: OAuthLoginItem[]
): OAuthLoginItem[]

Property	Description	Type	Default
name	Display name of the login method	String	—
icon	Login method icon URL	String	—
url	Authorization URL opened after clicking	String	—
showName	Whether to show the login method name next to the icon; may be specified by the high-code component	Boolean	—

Methods

Method	Description	Parameters
getCurrentLanguage	Gets the language actually used by the component	—

getCurrentLanguage

Return value: zh | zh-TW | en

Events

To be supplemented: the current capability definition does not provide public event information.

Slots

To be supplemented: the current capability definition does not provide information about configurable public slots.

Examples

Basic Usage

The component is globally registered through Vue.component and can be used directly in code.

<template>
    <div class="wrapper">
        <div class="login-wrapper">
            <fx-loginv2
                :tabs="tabs"
                default-tab="contact"
                :contact-type="['password', 'code']"
                lang="zh"
                theme-color="#189DFF"
                :show-forgot-password="true"
                :show-agreement="true"
                :agreement-config="agreementConfig"
            ></fx-loginv2>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tabs: ['contact', 'enterprise', 'qrCodeLogin'],
            agreementConfig: {
                serviceAgreement: {
                    name: '客户服务协议',
                    url: 'https://example.com/zh/service',
                },
                privacyPolicy: {
                    name: '客户隐私政策',
                    url: 'https://example.com/zh/privacy',
                },
            },
        };
    },
};
</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>

Callback Configuration

export default {
    methods: {
        filterEnterpriseList(enterprises) {
            return enterprises;
        },
        filterMoreLoginTypes(items) {
            return items;
        },
    },
};

Notes

• When defaultTab is not included in tabs, the first item in tabs is used according to the configuration rules.
• H5 automatically filters out qrCodeLogin; high-code H5 pages do not show other login methods.
• When showAgreement is false, phone-number verification-code login still requires separate confirmation to agree to receive verification codes.
• filterEnterpriseList and filterMoreLoginTypes must return the corresponding list. The returned list is used directly for display.