预览

<Preview> 组件

<Preview> 是一个内置组件，用于渲染生产环境数据。可以在 Vue 组件中使用它来查看模块的实际效果：

<template>
    <Preview id="ptah1" :schema="schemaData"></Preview>
</template>

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

export default defineComponent({
    components: {
        Preview
    },
    setup() {
        const schemaData = shallowRef({});

        // 模拟接口返回数据
        setTimeout(() => {
            schemaData.value = pageJson;
        }, 5000);

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

usePtah

usePtah 是一个 Hook 函数，接受 id、isProd 和 schema 参数，并返回对应 id 的实例。用来初始化和获取预览数据：

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

const ptahInstance = usePtah({
    id: 've1',
    isProd: true,
    schema: pageJson
});

参数说明

• id: 模块的唯一标识符，用于区分不同的模块实例。
• isProd: 布尔值，指示是否在生产环境中运行。如果为 true，则表示在生产环境中渲染。
• data: 页面数据（通常是 JSON 格式），用于初始化模块的状态和内容。

示例

下面是一个完整的 Vue 组件示例，展示了如何使用 usePtah 和 <Preview> 组件：

<template>
    <Preview :app="ptahInstance"></Preview>
</template>

<script>
import { defineComponent } from 'vue';
import { usePtah, Preview } from '@ptahjs/creative-vue';

export default defineComponent({
    components: {
        Preview
    },
    setup() {
        const ptahInstance = usePtah({
            id: 've1',
            isProd: true,
            schema: pageJson
        });

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

这个示例展示了如何将 usePtah 与 <Preview> 组件结合使用，从而实现模块的预览功能。