---
title: "组件拼接使用说明"
description: "一、什么是组件拼接？1. 组件拼接说明通常由选项卡（Tabs）和对应的内容面板组成。目前桌面端仅在 “自适应布局” 模式下，支持将多个进行组件拼接，可同时在一个区域通过切换 Tabs 实现查看多个组件内容。当点击切换 Tabs 时，相应的内容面板会被显示出来，而其他组件内容将被隐藏起来。可以有效的解决电脑屏幕过小，同时使用多个组件平铺而造成的数据遮挡问题。通过使用组件拼接，可以使用一种直观、高效的方式来访问和切换不同的功能组件模块，提升用户体验和界面的可用性。前置说明注释：2. 组件拼接主要特色提供清晰的导航：通过 Tabs 的方式，用户可以轻松切换到所需的功能或组件，从而提供了直观的导航体验。节省空间：组件拼接将多个组件内容放在一个页面区域上，通过切换 Tabs 来显示不同的内容，节省了页面空间。避免页面刷新：由于 Tab 拼接是在客户端进行切换和显示内容面板，因此可避免整个页面的刷新，提供更流畅的交互体验。"
slug: "pcezrl"
locale: "zh-CN"
region: "hk"
region_label: "Hong Kong"
url: "https://longbridge.com/hk/zh-CN/support/topics/longbridgepro/pcezrl.md"
updated_at: "2025-10-17T02:47:56.000Z"
category: "longbridgepro"
category_title: "桌面端功能"
references:
  related:
    - title: "图表交易的附加单设置介绍"
      url: "https://longbridge.com/hk/zh-CN/support/topics/longbridgepro/desktop-attach-order.md"
    - title: "桌面端组件、布局说明"
      url: "https://longbridge.com/hk/zh-CN/support/topics/longbridgepro/z3znzt.md"
    - title: "市场深度功能介绍"
      url: "https://longbridge.com/hk/zh-CN/support/topics/longbridgepro/Desktop_Depth_of_Market.md"
    - title: "图表交易介绍"
      url: "https://longbridge.com/hk/zh-CN/support/topics/longbridgepro/9o4yiz.md"
    - title: "桌面端快捷键说明"
      url: "https://longbridge.com/hk/zh-CN/support/topics/longbridgepro/hotkey_rules.md"
---

# 组件拼接使用说明

[Table of Contents](https://longbridge.com/hk/zh-CN/support/toc.md)

## 一、什么是组件拼接？

#### 1\. 组件拼接说明

通常由选项卡（Tabs）和对应的内容面板组成。目前桌面端仅在 “自适应布局” 模式下，支持将多个进行组件拼接，可同时在一个区域通过切换 Tabs 实现查看多个组件内容。当点击切换 Tabs 时，相应的内容面板会被显示出来，而其他组件内容将被隐藏起来。可以有效的解决电脑屏幕过小，同时使用多个组件平铺而造成的数据遮挡问题。

通过使用组件拼接，可以使用一种直观、高效的方式来访问和切换不同的功能组件模块，提升用户体验和界面的可用性。

> 前置说明注释：
> 
> ![](https://pub.pbkrs.com/uploads/2025/69420ca287a91ae155334be2fa1bc478)

#### 2\. 组件拼接主要特色

-   提供清晰的导航：通过 Tabs 的方式，用户可以轻松切换到所需的功能或组件，从而提供了直观的导航体验。
-   节省空间：组件拼接将多个组件内容放在一个页面区域上，通过切换 Tabs 来显示不同的内容，节省了页面空间。
-   避免页面刷新：由于 Tab 拼接是在客户端进行切换和显示内容面板，因此可避免整个页面的刷新，提供更流畅的交互体验。

## 二、组件拼接操作说明

#### 1\. 组件拼接时阴影色块介绍

-   阴影色块出现在目标组件上、下、左、右侧：均表示将新组件放置在目标组件的附近，默认不进行拼接。

![](https://pub-canary.lbkrs.com/uploads/2023/3e5f2d598b3797d91d3adf51da05f649)

-   当阴影色块完全占满目标组件时，松开鼠标后即可实现两个组件间的拼接。（需要使用组件拼接时，需尽量将新组件移动至目标组件中间区域。）

以下示例为将 “7\*24 快讯” 拼接进 “图表” 组件中。

![](https://pub.pbkrs.com/uploads/2025/73e39d7198e6b77e149b8d25da570200)

#### 2\. 操作组件拼接

**2.1 独立组件拼接：**两个独立的组件进行拼接时，可通过鼠标按住拖动的形式将所需要的组件拖动至目标组件中，当目标组件中整块出现蓝色阴影块时松开鼠标即可实现组件拼接。

![](https://pub-canary.lbkrs.com/social/2023/0/GWZWMhM1hayFMH1VRgwPhNAiNPMzsBQf.jpg)

**2.2 将独立组件拼接进已有的组合中**，可通过以下两个方式：

-   **方式一：**将需要拼接的组件拖动至目标组件，目标组件中整块出现蓝色阴影块时松开鼠标可实现拼接，此时新组件将在最后一个 Tab。

![](https://pub-canary.lbkrs.com/social/2023/0/gU48LLc6dQL4qbucv7PJpyJUqBauYuDB.jpg)

-   **方式二：**可将新组件拖动至顶部选项卡处，选项卡位置将出现蓝色阴影块，松手后可将新组件拼接进目标组中，此时新组件将在最后一个 Tab。

![](https://pub-canary.lbkrs.com/social/2023/0/eEAYENDwSnHpBh7fZ1CknpkP97eLCMJB.jpg)

**2.3 已拼接组件整体移动：**按住拼接组件 Tabs 的空白区域，可将拼接组件整体进行移动。放置位置阴影色块参考本说明 2.1 项。

![](https://pub-canary.lbkrs.com/uploads/2023/ba8b035267da417cb503b07162a7f2f6)

#### 3\. 调整拼接组件中选项卡位置

选中选项卡上需要移动的组件 Tab，鼠标按住进行拖动（Tips：拖动时鼠标下将出现当前组件的缩略图，缩略图参考组件工具箱），当目标 Tab 上出现蓝色阴影块时，则表示松手后该组件将移动至此处。

![](https://pub-canary.lbkrs.com/uploads/2023/bf855b9ef920b236cd426d5f95511be3)

#### 4\. 移除拼接组件中的组件

**4.1 将组件移除成独立组件在面板中使用：**按住目标组件的 Tab 进行拖动，当移动的位置出现蓝色阴影块时松手即可移动成功。

![](https://pub-canary.lbkrs.com/social/2023/0/Ex5oqYDKZjaK9AAkh96sbayvRTW75zux.jpg)

**4.2 不需要使用某个组件时，在拼接组件中将该组件移除：**在...更多功能中找到 “移除”，点击即可将组件移除。

![](https://pub-canary.lbkrs.com/social/2023/0/aQHqzFxMCG3EDe9MAbxF1ibp3UoRse2r.jpg)

**4.3 需要将拼接组件中的某个组件独立窗口使用时：**在...更多功能中找到 “脱离”，点击即可将组件脱离成独立窗口使用。

![](https://pub-canary.lbkrs.com/social/2023/0/hKLZBoFtoo7tDkMFGZYAckUfTvWpSZFw.jpg)

**特别说明：**

为了保障性能及用户体验，目前同一个页面上最多仅支持打开 15 个组件，使用了组件拼接将占用组件上限数。

---

> **Disclaimer**: This article is for reference only and does not constitute any investment advice. Content provided by [Longbridge](https://longbridge.com).