组件配置
2024年1月9日大约 3 分钟
配置
组件配置
创建组件的同时也需要创建 config.json ，设计器主要是通过配置文件来渲染组件，已经配置项组件。
{
"label": "文本组件",
"icon": "custom-icon-text",
"name": "PageText",
"tips": "文本组件是仪表盘中的一个文字内容编辑与展示工具。1",
"key": "PageText",
"placeholder": "暂无文本内容",
"version": "1.0.0",
"compatibleSdkVersion": "1.0.0, 1.5.1",
"compDescribe": "组件说明",
"versionDesc": "版本说明",
"configOptions": [
{
"label": "自定义JSON配置",
"type": "InputJson",
"field": "customConfigJson",
"defaultValue": {
"text": "custom config"
}
},
{
"label": "文本内容",
"type": "Editor",
"field": "textContent",
"required": true
},
{
"label": "填充颜色",
"type": "SelectColor",
"field": "textFillColor"
}
],
"PC": {
"w": 20,
"h": 15,
"minW": 20,
"maxW": 20,
"minH": 3,
"maxH": 60
},
"Mobile": {
"w": 60,
"h": 15,
"minW": 60,
"maxW": 60,
"minH": 2,
"maxH": 60
}
}属性说明
| 属性名 | 类型 | 描述 | 必要 | 设计器版本 |
|---|---|---|---|---|
| label | String | 名称，组件列表中显示 | 是 | 1.0.0 |
| icon | String | 组件图标 | 否 | 1.0.0 |
| name | String | 组件名程，建议使用驼峰命名 | 是 | 1.0.0 |
| key | String | 唯一标识，必须与name一致，在部分设计器中会使用字段作为组件名称 | 是 | 1.0.0 |
| tips | String | 组件说明 | 否 | 1.0.0 |
| placeholder | String | 组件空状态占位 | 否 | 1.0.0 |
| version | String | 组件版本，例如："1.0.0" | 是 | 1.0.0 |
| compatibleSdkVersion | String | 组件兼容设计器版本，例如：">=1.0.0, <=1.5.1" | 是 | 1.0.0 |
| configOptions | Array<ConfigOption> | 配置项，如果没有配置项，请配置一个空数组 [] ，配置项内容查看 | 是 | 1.0.0 |
| PC | ComponentSize | PC端组件尺寸配置，详情 | 是 | 1.0.0 |
| Mobile | ComponentSize | 移动端组件尺寸配置，详情 |
ConfigOption
| 属性名 | 类型 | 描述 | 必要 | 设计器版本 |
|---|---|---|---|---|
| label | String | 配置项名称 | 是 | 1.0.0 |
| type | String | 配置项对应的组件名称，请查看 | 是 | 1.0.0 |
| switch | Boolean | 配置项label中是否显示switch开关 | 否 | 1.0.0 |
| field | String | 绑定的字段名，用户设置组件时，会以此字段作为key存储在data中 | 是 | 1.0.0 |
| required | Boolean | 是否必填 | 否 | 1.0.0 |
| defaultValue | -- | 默认值，当为配置值时，会默认使用默认配置，根据不同配置项，默认值类型也不同 | 否 | 1.0.0 |
| hidden | Array | 配置项隐藏条件， [字段名，条件，对比值] ，会将配置值作为当前作用域，例如： ["fieldType","===","subForm" ] 会转化成 config[fieldType] === 'subForm' ，当满足条件时，当前配置项就会隐藏。 | 否 | 1.0.0 |
| tips | String | 更多配置项说明 | 否 | 1.0.0 |
ComponentSize
| 属性名 | 类型 | 描述 | 必要 | 设计器版本 |
|---|---|---|---|---|
| w | Number | 组件宽度 | 是 | 1.0.0 |
| minW | Number | 组件最小宽度 | 否 | 1.0.0 |
| maxW | Number | 组件最大宽度 | 否 | 1.0.0 |
| h | Number | 组件高度 | 是 | 1.0.0 |
| minH | Number | 组件最小高度 | 否 | 1.0.0 |
| maxH | Number | 组件最大高度 | 否 | 1.0.0 |
提示
ComponentSize中的高宽设置的都为初始值，在编辑组件时可以通过拖动来调整。
内置的表单配置项组件
提供的设计器中内置好了配置项供使用，以下是表单配置项可以用配置组件及对应演示配置。
SelectColor：选择颜色
{
"label": "填充颜色",
"type": "SelectColor",
"field": "background",
"defaultValue": "#FFFFFF"
}Editor：富文本内容
{
"label": "描述信息",
"type": "Editor",
"field": "textContent",
}Input：文本内容
{
"label": "标题",
"type": "Input",
"switch": true,
"required": false,
"defaultValue": "资讯新闻",
"field": "title",
"props": {
"maxLength": 10
}
}InputNumber：数字
{
"label": "最大长度",
"type": "InputNumber",
"field": "maxLength",
"props": {
"show-word-limit": true,
"min": 1,
},
"tips": "0-21844 常规字符类型；21845-65532 常规文本类型；65532以上 超长文本类型",
}switch：开关
{
"label": "自由布局",
"type": "switch",
"field": "isFreeLayout",
"defaultValue": false,
"switch": true
}InputJson：自定义json配置，上面配置组件能满足部分需求，如何无法满足配置可以使用InputJson来配置自定义json。
{
"label": "自定义JSON配置",
"type": "InputJson",
"field": "customConfigJson",
"defaultValue": {
"text": "custom config"
}
}RadiusConfig：设置组件圆角
{
"label": "圆角",
"type": "RadiusConfig",
"required": false,
"defaultValue": [
4,
4,
4,
4
],
"field": "radius",
"props": {
"maxLength": 10
}
}src/utils/pageUtils.js 工具类中可以使用 getRadius 来处理圆角。
SetBoxShadow：设置阴影
{
"label": "容器阴影",
"type": "SetBoxShadow",
"field": "boxShadow",
"defaultValue": {}
}src/utils/pageUtils.js 工具类中可以使用 getBoxShadow 来处理阴影。
现在暂时对外部只开放了这些配置。