插槽组件

插槽组件允许您通过 Vue 的插槽功能扩展表单内显示区域，提供了更大的灵活性和自定义能力。

scope的数据结构

Scope 对象提供了插槽组件的上下文数据，包括组件的生成规则、渲染规则、表单 API 等。以下是 Scope 的数据结构：

type Scope = {
    //插槽组件的生成规则
    rule: Rule,
    //插槽组件的最终渲染规则
    prop: Rule,
    //是否为阅读模式
    preview: Boolean,
    //表单的API
    api: Api,
    //获取组件的值和同步值，仅在规则中定义 field 时可用
    model: {
        //组件的值
        value: any;
        //更新值
        callback: (value: any) => void;
    },
}

在设计器中扩展显示内容

在 fc-designer 中，您可以使用插槽自定义设计器的显示内容。例如：

 <fc-designer ref="designer">
    <template #block_Fmrym0sz8orudpc="scope">
        这里是自定义内容
    </template>
</fc-designer>

在FormCreate中扩展显示内容

在 form-create 中，您可以通过插槽自定义表单显示内容。例如：

 <form-create>
    <template #block_Fmrym0sz8orudpc="scope">
        这里是自定义内容
    </template>
</form-create>

在设计器中添加自定义按钮

如果您想在设计器中添加一个自定义按钮：

<template>
    <fc-designer ref="designer">
        <template #block_Fmrym0sz8orudpc="scope">
            <button @click="customAction">自定义操作</button>
        </template>
    </fc-designer>
</template>
<script setup>
const customAction = () => {
    console.log('自定义操作触发');
};
</script>

在表单设计器中显示自定义表单组件

在表单中，您可以插入自定义表单组件进行扩展：

<template>
    <fc-designer ref="designer">
        <template #block_Fmrym0sz8orudpc="scope">
            <template v-if="scope.preview">
                {{scope.model.value}}
            </template>
            <CustomComponent v-else :api="scope.api" :modelValue="scope.model.value" @update:modelValue="scope.model.collback" />
        </template>
    </fc-designer>
</template>
<script setup>
    import CustomComponent from './CustomComponent.vue';
</script>

通过使用插槽组件，您可以轻松地扩展和定制表单和设计器中的显示内容，以满足您的具体需求。