创建模块

注册模块

模块通过 createPtah({ modules }) 注册。

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

app.use(createPtah({
    id: 've1',
    renderer: WebRenderer,
    modules: [
        {
            title: 'Web 模块',
            children: [
                {
                    title: '常用组件',
                    children: [UiButton, UiBox],
                },
            ],
        },
    ],
    parameterComponents: editors,
}));

---

模块目录结构

UiButton/
  index.js
  component.jsx

index.js 负责描述模块定义，component.jsx 负责渲染组件。

index.js

import component from './component.jsx';

export default {
    type: 'UiButton',
    title: '按钮',
    visible: true,
    engineVersion: '0.0.1',
    latestVersion: '1.0.0',
    versions: {
        '1.0.0': {
            component,
            schema: {
                propsSchema: [],
                eventSchema: [
                    { type: 'click', title: '点击' },
                ],
                slotSchema: [],
            },
        },
    },
};

component.jsx

<template>
    <div :id="id" class="ui-button">
        <button>{{ moduleProps.label }}</button>
    </div>
</template>

<script setup>
import { inject, computed } from 'vue';
import { PTAH_INSTANCE } from '@ptahjs/ui-vue';

const props = defineProps({
    id: { type: String, default: '' },
});

const app = inject(PTAH_INSTANCE);
const module = computed(() => app.$state.modulesById.get(props.id));
const moduleProps = computed(() => module.value?.props || {});
</script>

---

属性 Schema 工具

import {
    stringProp,
    numberProp,
    booleanProp,
    selectProp,
    objectProp,
    arrayProp,
    groupProp,
} from '@ptahjs/ui-vue';

函数	说明
stringProp(options)	字符串字段
numberProp(options)	数字字段
booleanProp(options)	布尔字段
selectProp(options)	下拉选择
objectProp(options)	对象字段
arrayProp(options)	数组字段
groupProp(options)	视觉分组

slotSchema

slotSchema: [
    {
        key: 'default',
        title: '默认插槽',
        propsSchema: [],
        allow: [],
        deny: [],
    },
]