Guide
独立部署
Schema预览
在线体验
Github
Guide
独立部署
Schema预览
在线体验
Github

Schema定义

Schema 用于描述物料的属性，平台支持用 TypeScript 的 interface 直接定义，更加符合开发者的编码习惯。物料在编译阶段会自动将 interface 文件通过 Ast 转成成Schema，其中成员属性会解析成配置属性，成员属性的注释会解析成对应的 Props。以下列举了一些常见的示例。

常见配置

StringSetter

效果

示例配置

写法1
IProps.d.ts
/**
* test-component
* @Component TestComponent
* @title 输入框
*/
export default interface TestComponentProps {
    /**
     * 文字
     *
     * @title 文字
     * @type string
     * @maxLength 10
     * @format text
     * @placeholder 请输入
     * @default ''
     */
    text: string;
}

ImageSetter

效果

示例配置

写法1
IProps.d.ts
/**
* test-component
* @Component TestComponent
* @title 输入框
*/
export default interface TestComponentProps {
/**
 * 图片选择
 *
 * @title 图片选择
 * @type string
 * @format image
 * @default https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg
 */
image?: string
}

NumberSetter

效果

示例配置

写法1
IProps.d.ts
/**
* test-component
* @Component TestComponent
* @title 数字输入框
*/
export default interface TestComponentProps {
    /**
     * 数字
     *
     * @title 数字
     * @type number
     * @min 1
     * @max 10
     * @format number
     * @placeholder 请输入
     * @default 2
     */
    num: number;
}

EventSetter

效果

示例配置

写法1
IProps.d.ts
/**
* test-component
* @Component TestComponent
* @title 点击事件
*/
export default interface TestComponentProps {

    /**
     * 直接点击
     *
     * @title 点击函数
     */
    onClick: (item: number) => void;
}

ColorSetter

效果

示例配置

写法1
IProps.d.ts
/**
* test-component
* @Component  TestComponent
* @title 颜色选择器
*/
export default interface TestComponentProps {
    /**
     * 颜色
     *
     * @title 颜色
     * @type string
     * @format color
     * @default #470c0c
     */
    color: string;
}

DateSetter

效果

示例配置

写法1
IProps.d.ts
/**
* test-component
* @Component  TestComponent
* @title 日期选择器
*/
export default interface TestComponentProps {
    /**
     * 日期选择
     *
     * @title 日期选择
     * @type string
     * @format date
     * @default 2024-05-09
     */
    date?: string;
}

TimeSetter

效果

示例配置

写法1
IProps.d.ts
/**
* test-component
* @Component  TestComponent
* @title 时间选择器
*/
export default interface TestComponentProps {
    /**
     * 时间选择
     *
     * @title 时间选择
     * @type string
     * @format time
     * @default 12:23:23
     */
    time?: string;

}

DateTimeSetter

效果

示例配置

写法1
IProps.d.ts
/**
* test-component
* @Component  TestComponent
* @title 日期时间选择器
*/
export default interface TestComponentProps {
    /**
     * 日期时间选择
     *
     * @title 日期时间选择
     * @type string
     * @format dateTime
     * @default 2022-04-23 12:34:23
     */
    dateTime?: string;

}

SingleSelectSetter

效果

示例配置

写法1
IProps.d.ts
enum TestSelectValue {
    test1 = '1',
    test2 = '2',
    test3 = '3',
}
/**
* test-component
* @Component  TestComponent
* @title 下拉单选
*/
export default interface TestComponentProps {
    /**
     * 下拉单选
     *
     * @title 下拉单选
     * @type string
     * @default '1'
     */
    selectVal: TestSelectValue;
}

MultipleSelectSetter

效果

示例配置

写法1
IProps.d.ts
enum TestSelectValue {
    test1 = '1',
    test2 = '2',
    test3 = '3',
}
/**
* test-component
* @Component  TestComponent
* @title 下拉多选
*/
export default interface TestComponentProps {
/**
 * 下拉选择多选
 *
 * @title 下拉多选
 * @type string
 * @default ['1']
 */
selectVal: TestSelectValue[];
}

BooleanSetter

效果

示例配置

写法1
IProps.d.ts
/**
* test-component
* @Component TestComponent
* @title 是否通过
*/
export default interface TestComponentProps {
    /**
     * 是否通过
     *
     * @title 是否通过
     * @type boolean
     * @default true
     */
    boolValue?: boolean
}

CheckBoxSetter

效果

示例配置

写法1
IProps.d.ts
enum TestSelectValue {
    test1 = '1',
    test2 = '2',
    test3 = '3',
}
/**
* test-component
* @Component TestComponent
* @title 复选框
*/
export default interface TestComponentProps {
    /**
     * 复选框
     *
     * @title 复选框
     * @type string
     * @widget checkbox
     * @wegit string
     * @default ['1']
     */
    boolValue?: TestSelectValue[]
}

ObjectSetter

效果

示例配置

写法1
IProps.d.ts
/**
* test-component
* @Component TestComponent
* @title 对象组件
*/
export default interface TestComponentProps {
    /**
     * 对象配置
     *
     * @title 对象配置案例
     * @type object
     */
    objValue?: ObjectValue
}

interface ObjectValue {
    /**
     * 年龄
     *
     * @title 年龄
     * @min 0
     * @max 100
     * @type number
     */
    age: number;

    /**
     * 名称
     *
     * @title 图片格式
     * @type string
     * @format image
     */
    formatImage: string;
}

ArrayObjectSetter

效果

示例配置

写法1
IProps.d.ts
interface TestArr {
    /**
     * 名称
     *
     * @title 测试对象名称
     * @type string
     * @default 测试
     */
    name: string
}


/**
* test-component
* @Component TestComponent
* @title 对象数组组件
*/
export default interface TestComponentProps {
    /**
     * 测试集合
     *
     * @title 测试集合
     * @type array
     * @default []
     */
    testArr?: TestArr[]
}

配置选项

常用注解选项

type

  • 描述：表单字段的类型
  • 类型：string | number | boolean | array | range | html | block

title

  • 描述：表单字段的标签
  • 类型：string

placeholder

  • 描述：输入内容提示
  • 类型：string | [string, string]

description

  • 描述：副标题描述
  • 类型：string

min

  • 描述：NumberSetter 类型时为最小值；
  • 类型：number

max

  • 描述：NumberSetter 类型时为最大值；
  • 类型：number

min

  • 描述：NumberSetter 类型时为最小值；
  • 类型：number

maxItems

  • 描述：ArrayObjectSetter、ArraySetter 类型时最大的长度；
  • 类型：number

minItems

  • 描述：ArrayObjectSetter、ArraySetter 类型时最小的长度；
  • 类型：number

format

  • 描述：在已设置的 type 下，如何处理这个 type
  • 类型：'image' | 'text' | 'dateTime' | 'date' | 'time' | 'file' | 'color'
TIP

会根据 type 和 format 自动选择适合的 widget。但更推荐显式的指定 widget，而不是自动选择。

其他注解选项

tooltip

  • 描述：气泡提示
  • 类型：string

descWidget

  • 描述：自定义副标题提示组件
  • 类型：string

required

  • 描述：是否必填
  • 类型：boolean

props

  • 描述：其他属性，object 属性转换成 string
  • 类型：string
ON THIS PAGE