自定义组件中获取 API

在使用 FormCreate 的过程中，自定义组件是一个非常强大的工具，它可以让你根据业务需求，实现高度定制化的表单元素。在生成这些自定义组件时，FormCreate 自动提供了一系列有用的注入参数，帮助你更高效地管理组件和表单的交互。这些参数包括 API 对象、配置信息、生成规则及字段名称等。以下是对这些注入参数的详细说明和使用示例。

formCreateInject 参数详解

1. formCreateInject.api

• 描述: 该 API 对象包含了一系列操作表单的方法，比如获取表单值、设置字段值、提交表单等。

2. formCreateInject.options

• 描述: 这是表单组件的全局配置对象，包含了在创建 form-create 实例时传递的所有选项。

3. formCreateInject.rule

• 描述: 生成规则对象，定义了组件的所有配置，例如标签类型、验证规则、事件等。

4. formCreateInject.field

• 描述: 当前组件绑定的字段名称，这个名称和表单的数据对象有关联。

在实际业务场景中的应用

示例：用户注册表单

假设你在开发一个用户注册表单，需要创建一个自定义组件用于选择用户角色，并且根据角色的不同启用或禁用一些字段，这时候 formCreateInject 的灵活性大有用武之地。

<template>
  <RoleSelector :roles="roles" @change="onRoleChange"/>
</template>


<script>
export default {
  props: {
    formCreateInject: Object  
  },
  data() {
    return {
      roles: ['管理员', '普通用户', '访客']
    };
  },
  methods: {
    onRoleChange(selectedRole) {
      if (selectedRole === '管理员') {
        this.formCreateInject.api.disabled(['restrictedField'], false); // 启用管理员特有的字段
      } else {
        this.formCreateInject.api.disabled(['restrictedField'], true); // 禁用字段
      }
    }
  }
}
</script>

示例：客户反馈表单

在一个客户反馈表单中，你可能想要根据用户输入的反馈类型动态显示不同的输入提示或帮助信息。通过 formCreateInject.rule 可以直接在组件内实现这样的切换逻辑。

<template>
  <div>
    <select @change="onFeedbackTypeChange($event)">
      <option value="问题">问题反馈</option>
      <option value="建议">功能建议</option>
      <option value="其他">其他</option>
    </select>
    <p>{{ currentPlaceholder }}</p>
  </div>
</template>


<script>
export default {
  props: {
    formCreateInject: Object
  },
  data() {
    return {
      currentPlaceholder: ''
    };
  },
  methods: {
    onFeedbackTypeChange(event) {
      const feedbackType = event.target.value;
      switch (feedbackType) {
        case '问题':
          this.currentPlaceholder = '描述问题细节...';
          break;
        case '建议':
          this.currentPlaceholder = '提供你的建议...';
          break;
        case '其他':
          this.currentPlaceholder = '其他反馈信息...';
          break;
      }
      this.formCreateInject.rule.props.placeholder = this.currentPlaceholder;
    }
  }
}
</script>

注意事项

• 确保你的自定义组件是以正确的方法接收了 formCreateInject 参数，否则无法获得到以上的功能。

通过这种方式，FormCreate 能够让你在复杂的业务场景下保持表单功能的强大与灵活性，从而提高开发效率。