检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
组件自定义事件实现 组件之间的交互,主要包括组件自定义事件和组件响应动作,本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器,当用户操作组件(比如下拉框选中选项)时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的eventConfi
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题: 目录文件详解
如何在页面URL参数中给全局变量赋值 如何基于页面级的全局变量实现组件交互中实现的场景是:用户在“下拉选择框”中选择某个告警状态时,通过配置的交互事件将告警状态赋值给全局变量,“多区域折线图”组件呈现的数据来源于封装了华为云Astro轻应用某API接口的数据集,将该接口的入参与全
复制连接器 创建同类型HTTP连接器时,通过复制连接器功能,可减少重复操作,提升开发效率。 复制连接器 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“连接器”。 在连接器管理页面,单击已创建连接器后的,选择“复制”,可复制连接器。
time 配置项说明 表1 time配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "time" 配置项类型。 subType String 否 subType: "date" 子类型,支持的类型有time、date和datetime。 value
switch 配置项说明 表1 switch配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "switch" 配置项类型。 value String 否 value: false 默认值。 name String 是 name: "commProps
}, ], }, ], }, 图2 propertiesConfig配置设置后效果 表1 组件配置项说明 字段 类型 示例 说明 migrateFrom String migrateFrom: "advancedSettings"
复制数据集到其它工作空间 创建同类型数据集时,通过“复制到工作空间”功能,可快速复制数据集到目标工作空间,减少重复操作,提升开发效率。 复制数据集到其它工作空间 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“数据集
{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件,相当于HTML文件,负责样式展示。 在华为云Astro大屏应用中自定义组件时,需要在服务端提前渲染的部分,可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate"
{widget}.css 文件介绍 {widget}.css为组件的样式文件,在该文件中编写组件的CSS样式。 华为云Astro大屏应用的组件未进行打包编译,CSS样式可能存在互相影响的风险。因为,CSS选择器务必要加上组件id,通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
删除数据源 数据源删除后,不可恢复,请谨慎操作。 删除数据源 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“数据源”。 在数据源管理页面,单击待删除数据源中的,选择“删除”。 数据源较多时,您
filterable: false 是否可搜索,默认为false。 allowCreate Boolean 否 allowCreate: false 是否允许用户创建新条目,需配合filterable使用,默认为false。 multiple Boolean 否 multiple: false 开启多选,默认为false。
tab 配置项说明 表1 tab配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "tab" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name: "commProps
checkbox 配置项说明 表1 checkbox配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "checkbox" 配置项类型。 value Boolean 否 value: true 默认值。 name String 是 name: "commProps
ROMA连接器数据源 第三方接口或服务通过配置为ROMA连接器的方式,接入外部数据。 新建ROMA连接器数据源 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“数据源”。 在数据源管理页面,单击“新建数据源”。
radio 配置项说明 表1 radio配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "radio" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name: "commProps
colorpicker 配置项说明 表1 colorpicker配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "colorpicker" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件,用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription":
内置API一览表 表1 内置API一览表 API API说明 init 组件渲染的入口函数,组件自己实现继承,使用推荐模板即可。 render 整个组件渲染的业务逻辑实现入口,组件自己实现继承。 getConnectorProperties 获取Connector对接的配置值,用于查看与Connector相关的信息。
eventConfig 字段介绍 eventConfig为组件事件配置项,用于定义组件事件暴露的变量结构,以及事件和对外透传变量的业务含义。eventConfig配置好后,在组件配置交互时可以将事件的itemVal传递给页面全局变量中,供其他组件使用。 典型示例 典型的eventConfig示例如下: