检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
slider tab switch radio checkbox colorpicker time select list 父主题: 自定义组件开发规范
入表达式设置页面。在表达式设置页面,可从下方左侧面板选择字段名、函数或者直接输入函数,如图2。 图2 按需设置表达式 测试API接口:用于测试该接口,单击“测试API接口”,“样例报文”中会显示输出结果。 样例报文:对应API接口的响应样例报文数据格式,数据集的元数据结构由该样例报文经转换器处理后的数据结构确定。
显示详情:是否显示详情。 默认详情字体:设置默认详情的字体、颜色和大小等。 选中详情字体:设置选中详情的字体、颜色和大小等。 高亮详情字体:设置高亮详情的字体、颜色和大小等。 显示时间:是否显示时间。设置为显示时,支持设置默认/选中/高亮时间字体的颜色、大小等。 显示状态:是否显示状态。设置为
value) { } } 配置项修改触发事件的回调函数,当前仅支持change事件。 入参vm说明 组件配置项中的disabled、showFunc和events中,都具有入参vm,vm为组件的Widget实例。 配置示例 通用配置示例如下,以global_SelectWidget组件为例
华为云Astro大屏应用企业版:适用于3D场景开发。 各套餐详细介绍,请参见计费模式。 包年/包月 套餐版本单价 * 购买时长(以月/年计算) 页面扩容包 扩容包用于新增更多的页面。扩容包不可单独购买和退订,扩容包的使用截止时间与主资源的截止时间保持一致,主资源套餐到期后,扩容包将不可使用。
组件响应动作实现 组件除了可以作为事件的触发器,还可以处理事件的响应动作,在响应动作中选择组件响应,就可以选择对应的组件响应动作,数据刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍,如何实现组件响应动作。 注册动作 在响应动作中,单击“响应动作”,在下拉框中选择对应的响应动作。
文件介绍 {widget}.js为组件逻辑文件,整个Widget的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构,应包含表1中API。其中,init、render和beforeDestory为组件的通用生命周期函数,其余为推荐模板实现。 表1 组件架构组成
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题: 代码结构介绍
组件自定义事件实现 组件之间的交互,主要包括组件自定义事件和组件响应动作,本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器,当用户操作组件(比如下拉框选中选项)时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的event
参数:接口入参,当有入参时,系统会自动展示,本示例不涉及。 当有入参时,单击参数后的“变量配置”,可给变量设置默认值。 图4 给变量设置默认值 测试API接口:用于测试该接口,单击“测试API接口”,“样例报文”中会显示输出结果。 样例报文:对应API接口的响应样例报文数据格式,数据集的元数据结构由该样例报文经转换器处理后的数据结构确定。
checkbox 配置项说明 表1 checkbox配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "checkbox" 配置项类型。 value Boolean 否 value: true 默认值。 name String 是 name: "commProps
select 配置项说明 表1 select配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "select" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name:
input 配置项说明 表1 input配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "input" 配置项类型。 subType String 否 subType: "password" 子类型,支持的类型有number、password。
radio 配置项说明 表1 radio配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "radio" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name: "commProps
桥接器模板 桥接器为连接前台页面和后台数据的连接器。在进行前台页面开发时,经常要调用后台数据,例如购物车中用户的ID,订单编号,商品信息等,这时需要通过桥接器动态调用后台接口获取后台数据。通过华为云Astro大屏应用预置的桥接器模板,您可以自定义桥接器。自定义桥接器时,需要先下载
tab 配置项说明 表1 tab配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "tab" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name: "commProps
length) { values[values.length - 1].size = 1; } }, }, 增加和删除list中一项。默认有增加删除功能,所以需要添加addItemFunc和itemDelCallBack函数。 如果noAdd为true,不需要添加。 childItems Array
type: "time" 配置项类型。 subType String 否 subType: "date" 子类型,支持的类型有time、date和datetime。 value String 否 value: "defaultValue" 默认值。 name String 是 name:
colorpicker 配置项说明 表1 colorpicker配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "colorpicker" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name
textarea 配置项说明 表1 textarea配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "textarea" 配置项类型。 value String 否 - 默认值。 name String 是 name: "commProps.myString"