区块动态项配置使用指引

最近更新时间:2024-07-12 15:04:12

我的收藏

区块动态性配置说明

区块动态项配置支持在保存区块的时候统一配置子元素的相关属性,例如标题、描述、图片、列表等,在区块包含元素较多的时候,区块根元素节点能快速且直观的配置所涉及子元素的相关信息,子元素只需要与根元素进行数据上的绑定即可。

使用指引

1. 在编辑器中构建以下场景,以普通容器为根节点为例,可以查看对应右侧配置面板相关属性。



2. 在编辑器左侧大纲树鼠标右键选择想要保持为区块的元素节点,出现的菜单栏中选择保存为区块或者直接在编辑器中单击保存区块图标。



3. 在区块配置弹窗中填写相关信息,其中动态性配置为区块根节点配置子元素属性的相关参数。



4. 复制动态性的默认配置模板,可以看到动态项配置的默认模板结构。



{
"configs": {
"type": "object",
"properties": {
"xxx": {
"type": "string"
}
}
}
}
说明:
上述 json 结构中的properties对应区块属性区域的参数结构,“xxx”代表属性标识,“type”代表属性类型,
5. 填写区块相关参数,配置动态项,以添加标题属性为例,配置完成,单击右下角新建



6. 编辑器中安装自定义区块中刚刚保存的区块。



7. 编辑器中区块动态性配置展示,可以看到刚刚在动态项中配置的属性已经生效。



8. 区块配置标题内容,在区块子元素文本组件绑定动态项配置,绑定格式为”$w.容器标识.data.xxxx“的形式。



9. 区块复杂结构动态性配置展示,下图配置表示标题和图片列表属性,在区块动态项配置以下结构。
{
"configs": {
"type": "object",
"properties": {
"param1": {
"title":"标题",
"type": "string",
"default": "hello world"
},
"title": "图片",
"x-component": "list",
"imageslist": {
"type": "array",
"maxItems": 8,
"minItems": 4,
"default": [],
"items": {
"type": "object",
"default": {},
"properties": {
"title": {
"title": "图片标题",
"type": "string"
},
"picture": {
"title": "图片地址",
"type": "string",
"x-component": "image"
}
}
}
}
}
}
}
说明:
参数
含义
param1、imageslist
属性标识
title
属性标题,不支持更改其它
type
属性类型,例如文字[string]、图片[image]、数组[array]、列表[list]等
defaullt
默认赋值/默认选项
x-component
列表属性,例如多图文、多选项等
maxItems、minItems
列表项数量限制
items
x-component 中项选项配置
10. 区块属性效果展示如下。



说明:
针对区块复杂结构动态项配置,建议用 本地开发模式 调试。
组件属性配置,请参见 配置示例
安装好本地开发环境,在对应应用页面中找到page.json文件,即可进行动态项参数配置。