表单的插槽(slots)

使用 FormCreate 时，可通过组件内置插槽扩展表单功能和自定义组件。

通过插槽扩展组件

scope 数据结构

interface Scope {
    rule: Rule; // 组件生成规则
    prop: VNodeData; // on: 事件, props: 配置
    children: Vnode[]; // 子级
    model: { // 定义 field 后才有
        value: any; // 表单组件 value
        callback: (value: any) => void; // 表单组件 value 更新
    };
};

通过type生成组件

通过设置插槽名称为 type-${rule.type}，可以根据组件的类型来生成插槽。此方法适用于需要根据组件类型动态插入内容的场景。

通过field生成组件

通过设置插槽名称为 field-${rule.field}，可以根据组件的字段名称来生成插槽。这使得你可以针对特定字段进行插槽内容的定制，满足更精细的布局和功能需求。

注意

使用这种方式时，只有当渲染规则（rule）发生变化时才会触发组件重新渲染。

扩展组件标签区域

scope 数据结构

interface Scope {
    rule: Rule; // 组件生成规则
    title: string; // on: 事件, props: 配置
    options: Object // 表单全局配置
};

通过 title 插槽扩展表单组件的标签区域，自定义标题样式并添加图标交互，实现更灵活的表单项标签展示和用户交互体验。

获取表单插槽

在自定义组件中通过 formCreateInject.slots() 方法获取并渲染表单插槽内容，实现组件与表单插槽的动态交互和数据传递。

注意

插槽内容只能在 render 函数或 template 模板中使用，在其他位置调用可能出现异常。

表单渲染:

<template>
  <div>
    <form-create v-model="value" :rule="rule" v-model:api="fApi" :option="options">
      <template #content="scope">
        <div class="content">
          自定义内容 {{ scope }}
        </div>
      </template>
    </form-create>
  </div>
</template>

自定义组件:

<template>
  <div>
    {{formCreateInject.slots().content('参数')}}
  </div>
</template>
<script>
  import {defineComponent} from 'vue';


export default defineComponent({
    data() {
      return {};
    },
    props: {
      //FormCreate 在生成自定义组件时
      //会自动向组件注入一些有用的参数在 formCreateInject 中
      formCreateInject: Object,
    },
  });
</script>