npm-gys-components-snapshots
v0.0.5
Published
#### 1、支持组件之间通信:配置方式 组件之间通信是通过actions 进行建立起来的
Downloads
8
Readme
layout 布局组件功能列表:
1、支持组件之间通信:配置方式 组件之间通信是通过actions 进行建立起来的
包含如下属性:
actions:[
{
eventName: 'loaded',
sourceControl: 'date-1', // 源组件的id
params: ['beginDate', 'endDate', 'orgId'], // 组件可以提供的参数,但目标组件接受的参数由 targetControls里面的 params 决定
targetControls: [
{
id: 'table-1', // 目标组件的id
params: {
// 目标组件需要的参数
startTime: 'beginDate', // startTime 是目标组件接收参数的名称, beginDate 是传递过来的参数名称
endTime: 'endDate'
}
}
]
}
...
]
组件table-1 侦听了组件date-1的变化 ,并将传递过来的参数 beginDate、 endDate 分别赋值给 startTime 和 endTime
2、全局参数赋值
表达式如下 如 {{orgId}} , 一般在默认defaultParams 使用,解析后会替换为对应的orgId
3、支持组件点击跳转 包含url跳转和router 跳转 配置方式:
redirect: {
type: 'url', // 默认:url 备选值:url,router
params: ['month'], // 传递参数
path: '' // 跳转路径
}
4、 弹出窗口实现,在布局元数据中配置需要弹窗的组件
如下:
layouts:
[{
type: 'dialog', // 这里配置需要弹窗的组件
components: [
{
id: 'dialog-3',
w: '80%',
showFooter: true
},
{
id: 'dialog-4',
w: '80%',
showFooter: true
}
]
}]
还需要配置如下操作:通过点击id为 button-1 的按钮修改组件 dialog-3 的显示属性,让组件显示出来 actions:[{ eventName: 'click', sourceControl: 'button-1', params: ['state'], targetControls: [ { id: 'dialog-3', params: { display: 'state' } } ] }]
还需要配置如下操作:通过点击id为 button-1 的按钮修改组件 dialog-3 的显示属性,让组件显示出来
actions:[{
eventName: 'click',
sourceControl: 'button-1',
params: ['state'],
targetControls: [
{
id: 'dialog-3',
params: {
display: 'state'
}
}
]
}]
6、 组件元数据获取方式
1、 从布局元数据中获取, 一般情况下布局组件会将子组件的元数据一起取出来,子组件需要从cmpMetadata 属性中获取就可以
props: {
cmpMetadata: {
type: Object,
default: function () {
return {}
}
}
}
2、 组件本身自己获取组件元数据,如果组件本身获取元数据,则需要从布局元数据传递元数据请求接口和参数,子组件需要从属性 metadataUrl 获取请求接口