加载面板

👑首创

加载面板是用于包裹业务模块的通用容器。它不仅提供标准化的 Loading 视觉反馈与交互阻断，还深度集成了系统的全局初始化计数逻辑，用于精确同步页面级的加载进度。

该组件的 inited 状态变更会自动上报至全局服务中的 portletCounter。通过这一机制，开发者可以联动控制 TuiAdaptive 组件的全局加载状态。

典型案例： 若将 TuiAdaptive 的 portletCount 设为 5，则当页面内有 5 个及以上的 ioaderPanel 进入 inited 状态时，TuiAdaptive 将自动判定全局初始化完成并停止 Loading 展示。

基础用法

TuiLoaderPanel 通常作为卡片或模块的根容器使用。通过控制 loading 和 inited 属性来管理组件的生命周期状态。

::: 需要补全Demo！！！！demo 包含基础切换、异步模拟及透明度配置的综合演示 loader-panel/index :::

注意：上面的演示集成了 TuiLoaderPanel 的核心特性，包括加载时的点击穿透防护（pointer-events: none）以及 inited 状态变化时的计数器响应。

API 参考

Props

属性名	说明	类型	默认值
loading	是否处于加载中状态。为 true 时，内容区域透明度降低且无法交互，同时显示 Loading 动画。	Boolean	true
inited	初始化完成标记。当该值从 false 变为 true 时，会触发全局状态中的 portletCounter 自增。	Boolean	false
loadingOpacity	加载状态下内容区域的透明度。范围 0-1，数值越小越透明。	Number	0.1

Slots

插槽名	说明
default	默认插槽，放置具体的业务组件内容。

核心机制说明

交互阻断与视觉反馈

当 loading 为 true 时，组件会自动应用以下样式行为：

• 交互阻断：设置 pointer-events: none，防止用户点击或操作未加载完成的 DOM 元素。
• 透明度处理：内容区域的透明度会被设置为 loadingOpacity 的值（默认 0.1），以视觉上区分“加载中”与“可用”状态。

全局计数器集成 (Portlet Counter)

该组件与系统的全局状态中的$globalState/portletCounter进行联动。

• 触发时机：监听 inited 属性的变化。
• 执行逻辑：仅当 inited 变为 true 时，执行 $tState.globalState.portletCounter++，可以通过$gPortletCounter计算属性来监测此参数。
• 使用场景：通常用于 Dashboard 或复杂页面，父级通过监听计数器的总值来判断是否所有子模块都已加载完毕（例如：Total Modules = 5, 等待 Counter === 5 时移除页面级遮罩）。

Loading 效果实现 (组件复用)

本组内部调用了 TuiLoadingArea 组件来实现区域遮罩效果。

• 职责分离：TuiLoaderPanel 负责容器布局、交互逻辑（如 pointer-events）和全局计数器状态；而 TuiLoadingArea 专注于 Loading 动画的视觉渲染。
• 透传控制：组件将接收到的 loading 属性直接透传给内部的 TuiLoadingArea，确保视觉反馈与逻辑状态保持一致。

如果您希望在文档中更显眼地提示这一点，也可以使用 Note 提示块：

内部依赖

TuiLoaderPanel 依赖 TuiLoadingArea 组件来显示加载动画。在使用前请确保 TuiLoadingArea 已在项目中注册或引用。