扩展自定义组件教程

FormCreate 支持在表单中生成并使用任何 Vue 组件。无论是简单的 UI 组件，还是复杂的自定义逻辑，都可以通过以下方式轻松集成到表单中。

注意事项

• 挂载与注册： 在自定义组件渲染之前，必须通过全局或局部的方式挂载或注册自定义组件，详见挂载或注册
• 获取组件规则： 只要在生成规则中定义 name 属性，就可以通过 fApi.component(name) 方法获取组件规则，方便在表单中动态操作该组件。

封装自定义组件

新建 Title.vue 文件，开发标题组件的功能样式。

<template>
   <div class="_fc-title" :class="size || 'h2'" :style="textStyle">
      {{ title }}
   </div>
</template>
<script>
   import {defineComponent} from 'vue';
   export default defineComponent({
      name: 'TestComponent',
      data() {
         return {};
      },
      props: {
         title: String,
         size: String,
         align: String,
         //FormCreate 在生成自定义组件时
         //会自动向组件注入一些有用的参数在 formCreateInject 中
         formCreateInject: Object,
      },
      computed: {
         textStyle() {
            return {
               textAlign: this.align || 'left',
            }
         }
      }
   });
</script>

组件挂载方式

通过 FormCreate 生成的自定义组件需要先进行挂载。挂载方式有两种：全局挂载和局部挂载。

全局挂载

全局挂载适用于整个 Vue 应用。通过这种方式，组件在应用的任何地方都可以使用。

app.component('TestComponent', TestComponent);

局部挂载

局部挂载适用于特定的表单实例。这种方法使得组件只在特定表单中可用，使用 formCreate.component() 方法进行挂载。

formCreate.component('TestComponent', TestComponent);

通过标签生成自定义组件

以下是通过标签生成组件的示例：

const rule = {
    type: 'TestComponent', 
    name: 'title',
    props: {
      title: '自定义标题'
   }
}

使用 component 配置项直接生成组件

如果不想提前挂载组件，可以通过 component 配置项在生成规则中直接指定组件。这样无需显式挂载，组件即可在表单中使用。

const rule = {
   type: 'TestComponent',
   component: TestComponent,
   name: 'title',
   props: {
      title: '自定义标题'
   }
};

动态修改规则

可以使用 fApi.getRule() 方法获取生成规则，并动态修改组件属性：

fApi.getRule('title').props.title = '我的标题'

这种方式非常灵活，适合在运行时根据业务逻辑调整组件行为。

参数自动注入

FormCreate 在生成自定义组件时，会自动向组件注入一些有用的参数。通过 props.formCreateInject 可以获取。

• formCreateInject
  • formCreateInject.api 表单 API 对象，用于操作表单。
  • formCreateInject.options 表单组件的全局配置。
  • formCreateInject.rule 生成规则对象，定义了组件的所有配置。
  • formCreateInject.field 字段名称，与表单数据绑定。

示例

生成ui框架自带组件

生成自定义组件

利用自动注入的参数与表单进行交互

以下示例展示了如何利用自动注入的参数与表单进行交互：

通过掌握以上自定义组件的生成和操作方法，您可以在 FormCreate 中实现几乎任何复杂的表单需求。无论是简单的按钮，还是复杂的动态表单项。