组件配置
2024年1月9日大约 4 分钟
配置
组件配置
创建组件的同时也需要创建 config.json ，设计器主要是通过配置文件来渲染组件，已经配置项组件。
{
"label": "单行文本(扩展)",
"icon": "custom-designer-form-text",
"name": "Text",
"key": "Text",
"type": "input",
"rowMaxWidth": "360px",
"supportSubforms": true,
"version": "1.0.4",
"compatibleSdkVersion": ">=1.0.0, <=1.5.1",
"compDescribe": "组件说明",
"versionDesc": "版本说明",
"configOptions": [
{
"label": "标题",
"type": "Input",
"switch": true,
"field": "title",
"required": true,
"props": {
"max-length": 100,
"show-word-limit": true
},
"defaultValue": "单行文本(扩展)"
},
{
"label": "描述信息",
"type": "Editor",
"field": "textContent",
"hidden": [
"fieldType",
"===",
"subForm"
]
},
{
"label": "是否必填",
"type": "switch",
"field": "required",
"defaultValue": false
},
]
}属性说明
| 属性名 | 类型 | 描述 | 必要 | 设计器版本 |
|---|---|---|---|---|
| label | String | 组件名称，当组件标题 title 未设置时，会引用当前值。 | 是 | 1.0.0 |
| icon | String | 表单组件图标，在组件列表及与表单相关联的模块中会展示出来，具体图标可以查看图标列表。 | 是 | 1.0.0 |
| name | String | 组件名称 | 是 | 1.0.0 |
| key | String | 唯一标识，必须与name一致，在部分设计器中会使用字段作为组件名称 | 是 | 1.0.0 |
| type | String | 当前组件使用的类型，一般使用 input 文本输入类型即可，如何有其他类型定制，可请查看字段类型列表 | 是 | 1.0.0 |
| rowMaxWidth | String | 组件最大宽度，值必须为有效的style尺寸属性值，如360px、100%等 | 是 | 1.0.0 |
| supportSubforms | Boolean | 是否支持子组件 | 否 | 1.0.0 |
| version | String | 组件版本，例如："1.0.4" | 是 | 1.0.0 |
| compatibleSdkVersion | Stirng | 组件兼容设计器版本，例如：">=1.0.0, <=1.5.1" | 是 | 1.0.0 |
| configOptions | Array<ConfigOption> | 配置项，如果没有配置项，请配置一个空数组 [] ，配置项内容查看 | 是 | 1.0.0 |
ConfigOption
| 属性名 | 类型 | 描述 | 必要 | 设计器版本 |
|---|---|---|---|---|
| label | String | 配置项名称 | 是 | 1.0.0 |
| type | String | 配置项对应的组件名称，请查看 | 是 | 1.0.0 |
| switch | Boolean | 配置项label中是否显示switch开关 | 否 | 1.0.0 |
| switchDefaultValue | Boolean | 配置项开关的默认值，此配置只有当 switch 为 true 时生效。 | 否 | 1.0.0 |
| field | String | 绑定的字段名，用户设置组件时，会以此字段作为key存储在data中 | 是 | 1.0.0 |
| required | Boolean | 是否必填 | 否 | 1.0.0 |
| props | Object | 配置项组件额外的props属性 | 否 | 1.0.0 |
| defaultValue | -- | 默认值，当为配置值时，会默认使用默认配置，根据不同配置项，默认值类型也不同 | 否 | 1.0.0 |
| hidden | Array | 配置项隐藏条件， [字段名，条件，对比值] ，会将配置值作为当前作用域，例如： ["fieldType","===","subForm" ] 会转化成 config[fieldType] === 'subForm' ，当满足条件时，当前配置项就会隐藏。 | 否 | 1.0.0 |
| tips | String | 更多配置项说明 | 否 | 1.0.0 |
内置的表单配置项组件
提供的设计器中内置好了配置项供使用，以下是表单配置项可以用配置组件及对应演示配置。
DefaultValue：默认值设置
{
"label": "默认值",
"type": "DefaultValue",
"field": "defaultValue",
"props": { // 这里配置固定配置以下配置
"visibleType": false,
"inputType": "text",
},
"defaultValue": {
"type": "custom",
},
}Editor：富文本内容
{
"label": "描述信息",
"type": "Editor",
"field": "textContent",
}FieldEncryption：加密字段
{
"label": "字段加密",
"type": "FieldEncryption",
"field": "encryption",
"switch": true,
"switchDefaultValue": false,
"tips": "根据字符长度进行数据模糊化;被模糊的字符用符号*表示",
"defaultValue": { // 加密开始和结束位置
"start": 1,
"end": 1,
},
}Input：文本内容
{
"label": "提示文字",
"type": "Input",
"field": "placeholder",
"props": {
"max-length": 20,
"show-word-limit": true,
},
"tips": "最多输入20个字符；如果不需要提示，清空即可。",
}InputNumber：数字
{
"label": "最大长度",
"type": "InputNumber",
"field": "maxLength",
"props": {
"show-word-limit": true,
"min": 1,
},
"tips": "0-21844 常规字符类型；21845-65532 常规文本类型；65532以上 超长文本类型",
}FormOptionConfig：选择项配置
{
"label": "选项",
"type": "FormOptionConfig",
"field": "optionsConfig",
"props": {
"type": "radio",
},
"defaultValue": {
"options": [
{ "label": "选项1", "value": "选项1", "type": "option" },
{ "label": "选项2", "value": "选项2", "type": "option" },
{ "label": "选项3", "value": "选项3", "type": "option" },
],
"value": void 0,
},
}TextIcon：图标选择
{
"label": "前提示信息",
"type": "TextIcon",
"placeholder": "可输入前缀",
"field": "prefix",
}switch：开关
{
"label": "是否清空",
"type": "switch",
"field": "clear",
"defaultValue": false,
}InputJson：自定义json配置，上面配置组件能满足部分需求，如何无法满足配置可以使用InputJson来配置自定义json。
{
"label": "自定义JSON配置",
"type": "InputJson",
"field": "customConfigJson",
"defaultValue": {
"text": "custom config"
}
}