预览

<Preview> 组件

<Preview> 是运行时预览组件，用来把 Runtime 当前持有的页面数据渲染出来。

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

<script setup>
import { useRuntimeApp, Preview } from '@ptahjs/ui-vue';

const runtime = useRuntimeApp({ id: 've1' });
runtime.schema(pageJson);
</script>

useRuntimeApp()

useRuntimeApp() 用于创建运行时实例，适合预览模式和生产渲染模式。

import { useRuntimeApp } from '@ptahjs/ui-vue';

const runtime = useRuntimeApp({ id: 've1' });

参数

• id：运行时实例的唯一标识。

常见流程

1. 先通过 createPtah() 注册模块、渲染器和参数组件。
2. 在组件 setup() 中调用 useRuntimeApp()。
3. 通过 runtime.schema(data) 注入页面 Schema。
4. 用 <Preview :app="runtime" /> 输出渲染结果。

注意事项

• useRuntimeApp() 必须在 Vue 组件的 setup() 中调用。
• 它只负责运行时渲染，不包含设计器能力。
• 如果需要编辑、拖拽和导出，请改用 useDesignerApp()。