@beisen/metadata-runtime v0.1.1
meta-runner
元数据渲染器模块,解析标准元数据渲染出页面
组件
{
name: 'cmp-name', /* 组件的名字,通常用作唯一标示 */
type: 'cmp-type', /* 组件的类型 (Vue.Component | React.Component) */
attributes: {
props: {}, /* 自定义属性 */
events: {}, /* 组件的事件 */
slot: '' /* 布局使用 ( Vue的实现, 参见Vue文档 ) */
},
children: []
}
事件流
{
onDeleteEventHandler: {
type: 'confim', /* 事件流是由action拼接而成,每一个节点都是一个action的定义 */
pass: true, /* 配置了pass属性为true后,事件流执行时将跳过该action */
params: {
text: '确认要删除该条记录吗?'
},
promise: { /* promise中定义下一级事件 */
resolve: { /* 上级action中resolve后将直接调用这里定义的resolve */
type: 'deleteItem',
params: {
userID: BSGlobal.UserID
},
promise: {
resolve: {
type: 'alertOperationSuccess',
params: {
text: '删除成功'
}
}
}
},
reject: { /* 上级action中reject后将直接调用这里定义的reject */
type: 'backToIndexPage'
}
}
}
}
- 对于事件流中使用的action, 返回的数据都会被merge进下一个action的parmas参数中
完整的带有事件流的组件
{
name: 'button-unique-name-001',
type: 'vue-common-button',
attributes: {
props: {
'text': '删除按钮'
},
slot: 'main',
events: {
onDeleteEventHandler: {
type: 'confim',
pass: true,
params: {
text: '确认要删除该条记录吗?'
},
promise: {
resolve: {
type: 'deleteItem',
params: {
userID: BSGlobal.UserID
},
promise: {
resolve: {
type: 'alertOperationSuccess',
params: {
text: '删除成功'
}
}
}
},
reject: {
type: 'backToIndexPage'
}
}
}
},
},
children: []
}
模块的使用
模块返回三个对象
metadataFormat: Function
用来格式话PageBuilder编辑后的元数据到标准元数据结构
metadataUtil: Object
一组用来处理标准元数据的工具类函数, 包括: findCmpByConditions(), getChildren(), getDeepChildren(), findByCmpName(), findCmpsByType(), visitEveryCmp()
install: Function
模块初始化的函数,函数接受一个Object作为传入参数,Object中需要传入两个对象:1. store.dispatch 2. Vuex Usage: install({ 'dispatcher': store.dispatch, 'Vuex': Vuex })
install 函数返回两个对象,包括:
renderComponent: Function,接受标注元数据作为参数,返回Vue组件实例
bindEvents: Function, 该函数一般无需直接调用,在renderComponent内部已经调用了该函数