检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
> 我的组件”中,将自定义组件上传到组件库中时,“场景”请选择“大屏&PC端”、“移动端”。设置后,该组件才可在页面中展示。 图1 上传自定义组件 华为云Astro大屏应用中组件 介绍华为云Astro大屏应用支持的组件类型,以及每个类型下所包含的具体组件,帮助您快速了解各组件的位置
新建并开发自定义组件 操作场景 当系统预置的组件无法满足用户需求时,用户可自定义组件包进行上传,在页面中进行使用。在开发自定义组件前,请仔细阅读自定义组件开发规范章节内容,了解组件的开发规范。下面以开发网站中常用的柱状图(vue2+Echarts)组件为例,向您介绍如何开发自定义组件。 本
在页面编辑模式下,按照组件分类,查找到对应组件。 您也可以在搜索框中,输入所需的组件(如图1),或者按照图2进行查找。 图1 搜索所需组件 图2 按照分类查找 按住鼠标左键,将目标组件拖拽到画布中。 图3 拖拽文本编辑组件到画布中 组件添加成功后,会自动展示在画布中。您可以通过拖拽组件边框,调
组件数据接入 组件对接数据配置开关 组件的数据可来自于静态数据或通过数据集获取,以EchartsWidgetTemplate组件为例,在“{Widget}”.editor.js文件中,可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类
跨页面复制组件 通过复制到功能,可快速将组件复制到其他页面,从而高效完成多个同类型组件配置项参数之间的传递。 跨页面复制组件 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在编辑页面状态下,选中一个或多个组件,单击右键,选择“复制到”,并选择组件待复制到的页面。
单击操作列中的,可上传组件图标。 单击操作列中的,可删除上传的组件包。 上传成功后,返回我的组件页面,可查看到已上传的组件。 图2 查看已上传的BarGraph组件 在大屏页面中使用自定义组件。 参考使用空白画布新建页面中操作,新建一个大屏页面。 在大屏页面的“全部组件 > 其它
组件设置 在组件设置中,查看并管理当前项目中已引用到的所有组件。 组件设置 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在华为云Astro大屏应用界面的项目列表中,单击已创建的项目,进入项目。 在主菜单中,选择“项目设置”,进入项目设置页面。 参考设置项目锁中操作,获取项目锁。
拖拽组件 在画布区域中,选中一个组件或多个组件(按住Ctrl键可选择多个组件),按住鼠标左键可进行拖拽。 拖拽组件 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在页面编辑模式下,选中一个或多个组件,按住鼠标左键拖拽到对应位置。 图1 拖拽组件 父主题:
组件响应动作实现 组件除了可以作为事件的触发器,还可以处理事件的响应动作,在响应动作中选择组件响应,就可以选择对应的组件响应动作,数据刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍,如何实现组件响应动作。 注册动作 在响应动作中,单击“响应动作”,在下拉框中选择对应的响应动作。
您介绍如何设置组件间的交互能力。 组件间交互 参考使用空白画布新建页面中操作,新建一个空白页面。 在大屏开发页面,从“全部组件 > 装饰”中拖拽“自定义背景框”组件到画布中,并调整大小。 图1 拖拽自定义背景框到画布中 从“全部组件 > 导航”中拖拽“选项卡”组件到“自定义背景框”中。
删除组件 组件删除后无法恢复,且会影响相关交互的组件,请谨慎操作。 删除组件 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在编辑页面状态下,选中组件,单击右键,选择“删除”。 图1 删除组件 您也可以在“图层”中,选中一个或多个组件,单击“删除”。
在编辑页面状态下,选中组件,单击右键,选择“隐藏”,可隐藏该组件。 图1 隐藏组件 您也可以在“图层”中,将鼠标悬浮在组件上,单击,隐藏组件。 图2 在图层中隐藏组件 图3 隐藏后效果 组件隐藏后,如果需要再次显示组件,请单击“图层”,将鼠标悬浮在已隐藏的组件上,单击显示图标。 父主题:
筛选组件 在图层中,支持按组件名称、组件标题和组件类型进行筛选,帮助您更加高效的选择所需要的组件。 筛选组件 参考创建页面中操作,创建所需的页面。 选择“图层”,进入图层页面。 在图层中,单击,筛选组件。 图1 筛选组件 父主题: 图层管理
组件自定义事件实现 组件之间的交互,主要包括组件自定义事件和组件响应动作,本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器,当用户操作组件(比如下拉框选中选项)时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的event
复制并粘贴组件 通过复制粘贴功能,可快速将组件的配置参数复制到同类型的另一个组件中,从而高效完成多个同类型组件配置项参数之间的传递。 复制并粘贴组件 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在编辑页面状态下,选中组件,单击右键,选择“复制并粘贴”。
重命名组件 通过重命名功能,可自定义组件的名称,便于搜索和管理。 重命名组件 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在编辑页面状态下,选中组件,单击右键,选择“重命名”。 图1 重命名 您也可以在“图层”中,将鼠标悬浮在组件上,单击“重命名”。
日历组件 日历组件是文本组件的一种,用于展示日历,用户可在具体日期上记录待办事项或者重要内容。 在大屏设计页面,从“全部组件 > 文本”中,拖拽“日历组件”组件至画布空白区域,如图1。 图1 日历组件 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片
callFlowConn 根据组件配置的数据类型(数据集、桥接器、数据源和静态数据),获取数据。 beforeDestroy 组件销毁前的回调函数,组件自己实现继承。 init 组件初始化入口API,以SelectWidgetTemplate组件为例,初始化组件通用能力,负责注册组件事件和组件动作。主逻辑建议如下:
参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在页面编辑模式下,单击右键,选择“锁定”,可锁定组件。 图1 在画布中锁定组件 您也可以在“图层”中,将鼠标悬浮在组件上,单击,锁定组件。 图2 在图层中锁定组件 解锁组件 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
setCookie("key","value") getI18n 一般用于在初始化阶段返回一个Vue18n的实例,配合Vue和VueI18n使用。使用方式参考如下: /* * 该Vue18n实例可以在new一个Vue实例时赋值为i18n参数。 */ HttpUtils.getI18n({