HumanBreak/docs/api/motajs-system-ui/GameUI.md

GameUI API 文档

本文档由 DeepSeek R1 模型生成并微调。

graph LR
    GameUI --> IGameUI

实现 IGameUI 接口

接口描述

IGameUI<C> 是 UI 系统的核心接口，定义了 UI 实例的基础结构和静态操作方法。

---

属性说明

属性名	类型	描述
name	string	只读，UI 的唯一标识名称
component	C extends UIComponent	只读，关联的 Vue 组件实例
list（静态）	Map<string, GameUI<UIComponent>>	静态属性，存储所有已注册的 UI 实例，键为 name，值为 GameUI 实例

---

构造方法

consturctor

function constructor(name: string, component: C): GameUI;

• 参数
  • name: UI 的唯一标识名称
  • component: 关联的 Vue 组件实例

示例

import { defineComponent } from 'vue';

export const MyComponent = defineComponent(...);

// 创建 UI 实例并自动注册到静态列表
export const MyUI = new GameUI('my-ui', MyComponent);

---

方法说明

GameUI.get

function get<T extends UIComponent>(id: string): GameUI<T> | null;

静态方法：根据 UI 名称从静态列表获取实例。

• 参数
  • id: UI 的唯一标识名称
• 返回值
  匹配的 GameUI 实例，未找到时返回 null

示例

// 获取名为 "home" 的 UI 实例
const ui = GameUI.get<MyComponent>('my-ui');
if (ui) {
    console.log(ui.component); // 输出关联的 Vue 组件
}

---

总使用示例

import { defineComponent } from 'vue';
import { GameUI } from '@motajs/system-ui';

// 定义组件
export const MyCom = defineComponent(() => {
    return () => (
        <container>
            <text text="自定义组件 UI" />
        </container>
    );
});

// 定义 UI 实例
export const MyUI = new GameUI('my-ui', MyCom);