检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
了解代码目录结构 当系统预置的组件无法满足用户需求时，用户可自定义组件并上传到AstroCanvas中使用。AstroCanvas为您预置了一些组件模板（Widget包），您可以基于组件模板开发自定义组件。 获取组件模板包 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。
input-number slider tab switch radio checkbox colorpicker time select list 父主题： 自定义组件开发规范
配置项总览 本章节介绍AstroCanvas支持的组件配置项，您可以通过{widget}.editor.js文件中定义的type字段，来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件，相当于HTML文件，负责样式展示。 在AstroCanvas中自定义组件时，需要在服务端提前渲染的部分，可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate" v-cloak>
自定义组件时，如何设置交互事件的输出变量 操作场景 开发者自定义组件时，可设置交互事件的输出变量，如图1所示，AstroCanvas支持将事件的输出变量（如“selectValue”）绑定页面级的全局变量（如“status”）。 图1 事件输出参数绑定全局变量 实现逻辑 自定义组
关系型数据库 操作场景 基于关系型数据库，如MS SQL Server、MySQL、Oracle、GaussDB或PostgreSQL创建的数据集。 前提条件 连接的数据源已创建，如何创建请参见关系型数据库数据源。 创建关系型数据库数据集 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍
boolean 是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项
boolean 是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项
boolean 是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项
配置数据集参数。 图3 设置数据集 应用：选择调用自定义接口所属的应用。 API接口：选择待调用的API接口，下拉框中的选项取值为接口的标签，如果接口标签取值为中文，则这里“API接口”显示为中文标签。如果接口标签未定义，则显示接口的操作名称。 请求类型：API接口的请求类型，系统会自动填入。
boolean 是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项
boolean 是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项
boolean 是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项的值来判定是否显示，返回true显示
boolean 是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项
boolean 是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项
boolean 是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项
boolean 是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项
boolean 是否禁用，可自定义函数，根据其他选项的值来判定是否禁用，返回true禁用。 showFunc Function 否 showFunc: function(vm) { return vm.commProps.showTitle; } 是否显示该配置项，可自定义函数，根据其他选项
list 配置项说明 表1 list配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "list" 配置项类型。 name String 是 name:"intervalColors" 双向绑定list名称。 label Object 否 label:
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
