创建模块配置项

参数组件是 <ParameterWidget> 用来渲染字段编辑器的自定义 Vue 组件。

工作方式

当 <ParameterWidget> 渲染某个字段时，会读取该字段 schema 上的 component 名称，并找到对应的已注册组件，然后传入：

• modelValue：当前字段值
• node：字段 schema 节点

字段变化后，组件通过 update:modelValue 向上同步值。

PropString 示例

export default {
    name: 'PropString',
    props: {
        modelValue: String,
        node: Object,
    },
    emits: ['update:modelValue'],
    setup(props, { emit }) {
        return () => (
            <input
                value={props.modelValue ?? ''}
                placeholder={props.node?.tips ?? ''}
                onInput={(e) => emit('update:modelValue', e.target.value)}
            />
        );
    },
};

注册参数组件

import { createPtah, WebRenderer } from '@ptahjs/ui-vue';
import PropString from './PropString';
import PropNumber from './PropNumber';

app.use(createPtah({
    id: 've1',
    renderer: WebRenderer,
    modules: moduleTree,
    parameterComponents: {
        PropString,
        PropNumber,
    },
}));