生成自定义组件

本文介绍如何在 form-create 中生成和使用自定义组件，包括使用 UI 框架自带组件、生成自定义组件以及注入表单 API。

生成ui框架自带组件

通过 form-create 可以生成来自 UI 框架的组件。例如，你可以使用 Ant Design Vue、Element Plus 等 UI 框架中的组件。以下示例展示了如何生成一个 DatePicker 组件。

input1

input2

tab 1

tab 2

复制成功!

<template>
  <div>
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'el-tabs',
          style: 'width: 100%;',
          field: 'activeKey',
          value: '2',
          modelField: 'activeKey',
          children: [
            {
              type: 'el-tab-pane',
              props: {
                label: 'tab 1',
              },
              key: '1',
              children: [{
                type: 'input',
                field: 'input1',
                title: 'input1',
              }]
            },
            {
              type: 'el-tab-pane',
              props: {
                label: 'tab 2',
              },
              key: '2',
              children: [{
                type: 'input',
                field: 'input2',
                title: 'input2',
              }]
            },
          ]
        }
      ]
    }
  }
}
</script>

生成自定义组件

除了使用 UI 框架组件，form-create 还支持生成自定义组件。你可以根据自己的需求定义组件的生成规则，并将其集成到表单中。以下示例展示了如何生成一个自定义的组件。

input

这是一个自定义组件

复制成功!

<template>
  <div>
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
  </div>
</template>

<script>
import {defineComponent, h} from "vue";
import formCreate from '@form-create/element-ui';;

// import component from "./customComponent.vue";
const component = defineComponent({
  name: 'customA',
  props: {
    msg: String
  },
  setup(props) {
    return () => h('div', props.msg);
  }
});

export default {
  beforeCreate() {
    //挂载组件
    formCreate.component('customA', component);
  },
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        },

      },
      rule: [
        {
          type: 'input',
          field: 'input',
          title: 'input',
          value: '',
        },
        {
          type: 'customA',
          style: 'color:#ff7271',
          props: {
            msg: '这是一个自定义组件'
          }
        }
      ]
    }
  }
}
</script>

注入表单api

自定义组件可以通过 form-create 提供的事件注入机制，获取和操作表单 API。通过注入表单 API，你可以在自定义组件中访问和操作表单的各种功能。

input

点击修改输入框的值

点击修改自己的num:1

复制成功!

<template>
  <div>
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
  </div>
</template>

<script>
import {defineComponent, h} from "vue";
import formCreate from '@form-create/element-ui';;

// import component from "./customComponent.vue";
const component = defineComponent({
  name: 'custom',
  props: {
    formCreateInject: Object,
    num: Number
  },
  setup(props) {
    return () => h('div', {
      style: 'color: #ff7271;text-align: center;width: 100%;cursor: pointer;',
    }, [
      h('div', {
        onClick() {
          props.formCreateInject.api.getRule('input').value += '-修改了'
        },
      }, '点击修改输入框的值'),
      h('div', {
        style: 'color:#3451b2',
        onClick() {
          props.formCreateInject.rule.props.num++;
        },
      }, '点击修改自己的num:' + props.num)
    ]);
  }
});

export default {
  beforeCreate() {
    //挂载组件
    formCreate.component('custom', component);
  },
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        },
      },
      rule: [
        {
          type: 'input',
          field: 'input',
          title: 'input',
          value: '',
        },
        {
          type: 'custom',
          props: {
            num: 1
          }
        }
      ]
    }
  }
}
</script>