指南
配置
插件
API
教程
社区
指南
配置
插件
API
教程
社区
简体中文

Input

生成器插件提供了 Input 的方式完成与用户的问题交互，使用 JSON Schema 的方式进行定义：

例如：

const schema = {
  type: 'object',
  properties: {
    language: {
      type: 'string',
      title: '开发语言',
      enum: [
        { label: 'TS', value: 'ts' },
        { label: 'ES6+', value: 'js' },
      ],
    },
  },
};

JSON Schema 的格式参考了开源的 Formily Schema 的格式，下面将对支持的字段进行介绍：

type

定义当前 Schema 类型，当前支持的类型为 string、number 和 object。字符串输入和下拉选项都需要使用 string 类型。 object 类型用于实现 Schema 之间嵌套，需要配和 properties 属性使用。

title

定义当前 Schema 展示名称。

default

定义当前 Schema 的默认值。

enum

当前 Schema 为下列选项时，定义选项内容。

子项支持 string 或者 { label: string; value: string} 类型，当下拉选项中值和展示值相同时，可直接使用 string 定义。

当需要表示多选选项时，设置 default 字段为 [] 即可。

x-validator

当前 Schema 的校验规则。当 Schema 为输入类型时，在输入完成后会自动完成校验。

这里校验规则支持 Formily 提供的校验规则，例如最大值为 5：

const schema = {
  type: 'object',
  properties: {
    max_5: {
      type: 'number',
      title: '最大值(>5报错)',
      'x-validator': {
        maximum: 5,
      },
    },
  },
};

也支持直接使用验证函数：

const schema = {
  type: 'object',
  properties: {
    path: {
      type: 'string',
      title: '只能包含数字和字母',
      'x-validator': value => {
        if (!/^[0-9a-zA-Z]*$/g.test(value)) {
          return '格式不正确';
        }
        return '';
      },
    },
  },
};

x-reactions

使用 Schema 之间的联动，这里和 Formily 联动规则完全相同。

例如：

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      title: '名称',
    },
    path: {
      type: 'string',
      title: '路径',
      'x-reactions': [
        {
          dependencies: ['name'],
          fulfill: {
            state: {
              value: '{{$deps[0]}}',
            },
          },
        },
      ],
    },
  },
};

properties

组织当前 Schema 的结构，定义子表单。properties 为对象，key 为 Schema 关键字，value 为上述描述的 Schema 对象。