组合式 API

usePtahInstance()

usePtahInstance 用于访问当前的 ptah 实例。通过该 API，可以在组件内部访问和操作 ptah 实例，实现与平台的交互。

参数

• 无需传递参数。

使用示例

import { usePtahInstance } from '@ptahjs/creative-vue';

export default {
    name: 'Header',
    setup() {
        // 获取 ptah 实例
        const ptahInstance = usePtahInstance();

        // 输出 ptah 实例，供调试使用
        console.log(ptahInstance);

        return {};
    }
};

useUI()

useUI 用于在模块组件中初始化和使用 UI 组件。该 API 主要用于处理与 ptah UI 组件的交互。你可以使用它来初始化 UI 模块、绑定事件等。

参数

• id: 组件的唯一标识符，用于关联和识别 UI 模块。

使用示例

<template>
    <div :ref="id" class="ui-button">
        <button @click="onTestEventClick">按钮</button>
    </div>
</template>

<script>
import { useUI } from '@ptahjs/creative-vue';

export default defineComponent({
    name: 'UiButton1',
    props: {
        id: {
            type: String,
            default: ''
        }
    },

    setup(props) {
        // 初始化 UI 模块
        const { module } = useUI(props.id);

        // 测试点击事件
        const onTestEventClick = (e) => {
            // 执行点击事件的相关操作
        };

        return { onTestEventClick };
    }
});
</script>

useExecuteEvent()

useExecuteEvent 用于执行事件流程。通过该 API，可以触发指定的事件，并提供一个回调函数来处理事件完成后的逻辑。它允许你按照指定的事件执行流程处理数据或交互逻辑。

参数

• 无需传递参数。

返回值

• run: 用于执行指定的事件流程。

使用示例

import { useExecuteEvent } from '@ptahjs/creative-vue';

// 获取 run 函数，用于执行事件
const { run } = useExecuteEvent();

// 测试点击事件
const onTestEventClick = (e) => {
    // 执行点击事件的流程
    run('click', props.item, () => {
        console.log('执行完成');
    });
};

usePropsFormModel()

usePropsFormModel 用于处理配置项组件中的扩展属性模型数据，允许你在组件中与表单数据进行双向绑定，并动态更新表单值。

参数

• props: 传入的组件属性，包括配置项、默认值等。

返回值

• 返回一个模型数组，其中包含当前表单的值。

使用示例

import { usePropsFormModel, configProps } from '@ptahjs/creative-vue';

export default {
    name: 'PropNumber',
    props: configProps, // 配置项属性
    setup(props) {
        // 获取表单模型
        const [model] = usePropsFormModel(props);

        // 渲染带有双向绑定的输入框
        return () => (
            <input type="number" vModel={model.value} placeholder={props.config.placeholder} />
        );
    }
};

useRenderListener()

useRenderListener 用于监听图层渲染的状态。在图层渲染过程中，可以通过该 API 获取加载中的状态、渲染完成的状态等，便于处理渲染流程中的各种操作。

参数

• items: 渲染的元素或对象集合。
• sceneId: 当前场景的唯一标识符。
• loading: 渲染过程中的加载状态回调函数。
• complete: 渲染完成后的回调函数。

使用示例

import { useRenderListener } from '@ptahjs/creative-vue';

useRenderListener({
    items: items, // 渲染的对象集合
    sceneId: id, // 当前场景 ID
    loading: () => {
        console.log('加载中...');
    },
    complete: () => {
        console.log('加载完成！');
    }
});

useSceneRendering()

useSceneRendering 用于监听场景渲染过程中的状态变化。你可以通过此 API 在渲染过程中获取每个 UI 模块的渲染状态，便于进行调试和优化。

参数

• callback: 一个回调函数，用于接收每次渲染的 UI 模块 ID。

使用示例

import { useSceneRendering } from '@ptahjs/creative-vue';

useSceneRendering((uiId) => {
    console.log('渲染中', uiId); // 输出当前渲染的 UI 模块 ID
});

useSceneRendered()

useSceneRendered 用于监听当前场景渲染完成的事件。一旦场景渲染完成，你可以执行后续的操作，如更新 UI、触发交互等。

参数

• 无需传递参数。

使用示例

import { useSceneRendered } from '@ptahjs/creative-vue';

useSceneRendered(() => {
    console.log('渲染完成 - 当前场景'); // 场景渲染完成后的回调
});