检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
代码结构介绍 了解代码目录结构 目录文件详解 父主题: 自定义组件开发规范
了解代码目录结构 当系统预置的组件无法满足用户需求时,用户可自定义组件并上传到AstroCanvas中使用。AstroCanvas为您预置了一些组件模板(Widget包),您可以基于组件模板开发自定义组件。 获取组件模板包 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。
自定义api,组件在没有对接外部数据源时使用的桩数据,桩数据结构统一为二维数组对象 * @returns [{}] */ getMockData() { return [ { "x": "00:00", "y": 11
packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题: 代码结构介绍
], showFunc: function () { return false; }, }, { type: "select"
{widget}.css 文件介绍 {widget}.css为组件的样式文件,在该文件中编写组件的CSS样式。AstroCanvas的组件未进行打包编译,CSS样式可能存在互相影响的风险。因为,CSS选择器务必要加上组件id,通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件,需要在服务端提前渲染的部分,可以写在此文件中,相当于HTML文件,负责样式展示。 文件示例 <div id="EchartsWidgetTemplate" v-cloak> <div ref="echartsDom"
}); selectItem对象中,“desc”是对事件selectItem的解释。“fields”为组件对外暴露的字段及相应描述。相应代码要在{widget}.js中实现如下: emitSelectItem(itemVal) { widgetInst.triggerEvent("selectItem"
classfication 字段介绍 classfication字段代表的是当前组件需要展示哪些大的配置项分类。AstroCanvas在设计前期对分类也进行了分组,因此这个字段被扩展为双数组形式。一般默认情况下,直接在数组对象的第一个数组中配置即可。如果无配置,则所有属性展示在一个大的分类下。
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题: 目录文件详解
文件介绍及示例 文件介绍 {widget}.editor.js为组件属性定义文件,负责组件编辑状态时需要渲染的界面和逻辑。其中,“{widget}”为自定义组件的名称,如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件,用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription":
i18n.json 文件介绍 i18n.json为组件的国际化资源文件,用于配置多语言,目前支持的多语言包含中英文两种,相应的key值分别为['zh-CN','en-US']。多语言文件支持配置在多个Json中,在packageinfo.json中的配置示例如下: "i18n":
filter(item => { return keys.every(key => { if (!filterObj[key].length) { return true; } return filterObj[key]
return isNaN(Number(a[sortField])) ? a[sortField].localeCompare(b[sortField]) : a[sortField] - b[sortField]; }); } } return data
45&age=35,36&dept=cloud&name=cloud URL签名计算代码示例 以Java代码为例,URL签名计算代码示例如下: private String getSignature(String uri, TreeMap<String, String[]> parameterMap
1+:可以拖拽多个字段。 required Boolean 否 required: true 是否必须配置。 组件使用数据集 数据集实例获取。 组件代码中可使用如下API,来获取对应的数据集实例。 ConnectorIns: thisObj.getConnectorInstanceByNa
否使用模拟数据,对个别组件进行个性化设置,有效减少手动修改操作。 该功能的实现原理是:系统在桥接器代码中已增加mockData属性来记录桥接器是否启用了模拟数据,同时在桥接器父类代码中预置了getMockData函数,开发人员只需在自定义桥接器中自己覆写getMockData函数
义库)为例,介绍如何上传自定义库并如何在组件中使用库。 操作步骤 将自定义库的相关文件打成Zip包。 例如,在MintUI官网下载组件库的代码,增加一个packageinfo.json元数据描述文件,在该文件中列出Library包含的js和css文件名,并打成Zip包。该场景中Zip包为“MintUI
如何自定义动作 操作场景 在配置组件交互时,可以通过编写代码实现自定义交互动作,从而实现对应的业务需求。 图1 自定义动作 自定义动作参数说明 在自定义动作中,支持直接使用的参数如下: eventParam:组件传递出的参数。 以日期选择器组件为例,介绍如何获取eventParam。