Appearance
页面配置数据的结构定义
页面配置数据的Json结构,用于页面渲染,具体定义如下:
Config 部件配置信息,用于运行时
json
{
"type": String, // 组件tag,包括html或VUE2组件
"setter": String, // 个性化设置器code
"setterNamespace": String, // 个性化设置器所在应用或项目,此属性会在部件使用时自动添加
"setterVersion": String, // 个性化设置器所在应用或项目的版本,此属性会在部件使用时自动添加
"id": String, //编辑器自动生成的uuid,防止重复导致页面混乱
"title": String, // 节点名称,用于节点树展示
"options": OptionsObject, // 配置参数
"events": [EventObject], // 数组方式定义事件,支持修饰符
"model": String, // 模型变量名
"modelProp": String, // 模型属性名
"modelEvent": String, // 模型事件名
"modelHandler": String, // 模型监听事件方法
"definition": String, // Vue Model 定义,仅根节点有效
"children": Array<config>, // 子节点,包括插槽内的子节点
"leaf": Boolean, // 叶子节点,不允许拖拽放入子节点
"group": Boolean, // 分组节点,只能包含特定子节点,不允许拖拽放入子节点
"vif": String, // 是否渲染,当vif表达式成立时渲染
"velseif": String, //是否渲染,前节点必须包含vif或display,并且表达式不成立,当前velseif表达式成立时渲染
"velse": String, // 前阶段必须包含vif/display/velseif,并且表达式不成立时渲染
"loop": String, // 循环对象,可以是Object、Array、Number
"loopItem": String, // 循环时,元素的变量名,当前节点、子节点可以通过此变量获取循环中的当前对象(Object的属性值、Array的元素、Number的顺序值)
"loopKey": String, // Object对象循环时,Object的key值
"loopIndex" : String, // 循环的顺序值,从0开始
"slot": String, // 定义插槽名称
"slotProps" Object, //定义插槽参数对象
}
OptionsObject 配置对象,可层级嵌套
json
{
// 与 `v-bind:class` 的 API 相同,
// 接受一个字符串、对象或字符串和对象组成的数组
"class": {// 单层
"foo": true,
"bar": false
},
// 与 `v-bind:style` 的 API 相同,
// 接受一个字符串、对象,或对象组成的数组
"style": { // 单层
"color": "red",
"fontSize": "14px"
},
// 普通的 HTML attribute
"attrs": {
"id": "foo"
},
// 组件 prop
"props": {
"myProp": "bar"
},
// DOM property
"domProps": {
"innerHTML": "baz"
},
// 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
// 赋值,因为 Vue 已经自动为你进行了同步。
"directives": [ // 单层
{
"name": "my-custom-directive",
"value": "2",
"expression": "1 + 1",
"arg": "foo",
"modifiers": {
"bar": true
}
}
],
// 函数型作用域插槽的格式为
// { name: props => VNode | Array<VNode> }
"scopedSlots": { // 单层
"default": "props => createElement('span', props.text)"
},
// 配置型作用域插槽,用于children子节点获取作用域
"slotScope": "name-of-scope", // String,
// 如果组件是其它组件的子组件,需为插槽指定名称
"slot": "name-of-slot",
// 其它特殊顶层 property
"key": "loop-item-key", // String | Expression 循环对象使用的key值,
"ref": "myRef", // String ref值
// 如果你在渲染函数中给多个元素都应用了相同的 ref 名,
// 那么 `$refs.myRef` 会变成一个数组。
"refInFor": true // Boolean
}
EventObject 事件配置对象
json
{
"name": "click", // 事件名
"modifiers": [], // 修饰符,仅支持passive、capture、once、self、stop、prevent、native
"handler": "v:click" | "f:function(event){...}"
}