</div> 参考6中操作，在组件库中上传该Widget包。 打开一个高级页面，在设计页面左上方单击，从“自定义”组件中拖出刚创建的Widget至右侧空白页面。 选中该Widget，会在右侧显示该组件的属性配置面板。 在“属性”页签下，“自定义属性列表”区域中可看到自定义的这三个属性，根据需要进行修改。

查看更多 →

。 单击，选择新建并开发自定义组件中自定义的组件包BarGraph.zip，填写基本信息，单击“保存”。 图1 上传自定义组件 表1 上传自定义组件参数说明 参数 说明 组件名字 组件名称，系统会根据组件包名称自动填充。 示例：BarGraph 操作类型 当前操作的类型，如新增、更新等。

查看更多 →

组件自定义事件实现 组件之间的交互，主要包括组件自定义事件和组件响应动作，本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器，当用户操作组件（比如下拉框选中选项）时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的event

查看更多 →

新建并开发自定义组件 操作场景 当系统预置的组件无法满足用户需求时，用户可自定义组件包进行上传，在页面中进行使用。在开发自定义组件前，请仔细阅读自定义组件开发规范章节内容，了解组件的开发规范。下面以开发网站中常用的柱状图（vue2+Echarts）组件为例，向您介绍如何开发自定义组件。

查看更多 →

调试工具 Vue Devtools是一个专为Vue.js开发者设计的浏览器扩展。它提供了一系列强大的功能，帮助开发者更容易地调试和优化他们的Vue应用程序。 Vue Devtools 以下是Vue Devtools的主要特点和功能： 组件树查看：允许用户查看完整的Vue组件层次结构

查看更多 →

前台控制逻辑。 通过vue父子组件引用的方式，将子页面CustomerInfoDemo.vue嵌入座席流程可视化的父页面servicecloud/aicc-web/src/views/ccmanagement/pages/iolp-service/IolpService.vue中。 示例代码如下：

查看更多 →

<script setup> import * as vue from 'vue' import { defineProps, defineEmits } from 'vue' import { I18nInjectionKey } from 'vue-i18n' const props =

查看更多 →

（可选）开发自定义登录组件 “开发自定义登录组件”步骤可以直接跳过，本示例已为您提供了开发好的自定义登录组件。如果您想要自定义登录组件的开发方法，可参考本章节执行。 自定义登录组件 进入创建“设备维修管理系统”应用中创建的应用。 在左侧资产下的组件模板中，单击“widgetVueTemplate”，再单击“下载”。

查看更多 →

如何实现页面组件间的交互 组件之间的交互主要依托数据的变化和传输实现，将组件的属性与对应的数据进行绑定。当其他组件的事件、服务编排、事件等使属性绑定值发生变化时，绑定的属性也随即发生变化，实现了组件之间的交互。 数据绑定方式 在标准页面开发界面，选中任意组件，在右侧“属性”页签进行数据绑定。

查看更多 →

AUI为内部开源使用，外部无法访问，底层逻辑使用Vue组件暴露封装，因此在不使用AUI情况下，通过原生Vue CLI脚手架搭建组件库形式暴露卡片组件，也能够正常使用。 开发过程 准备工作中已经正常安装了Vue CLI脚手架，因此可以快速搭建Vue项目。 初始化Vue项目。 vue create my-app

查看更多 →

生命周期介绍 setup：在组件创建时执行。 onBeforeMount：在组件被挂载之前执行。 onMounted：在组件挂载完成后执行。 onBeforeUpdate：在组件更新之前执行。 onUpdated：在组件更新完成后执行。 onBeforeUnmount：在组件被卸载之前执行。

查看更多 →

</div> 参考6中操作，在组件库中上传该Widget包。 打开一个高级页面，在设计页面左上方单击，从“自定义”组件中拖出刚创建的Widget至右侧空白页面。 单击页面上方的，保存高级页面。 切换环境语言，在不同语种下，在页面中选中拖出的Widget，会在右侧显示该组件的属性配置面板，查看Widget属性是否符合预期。

查看更多 →

props 属性值组件的 props。 Object 使用模板开发样例 本示例中的imgbutton组件是使用nodejs开发前端的组件。以下若无特殊说明，均基于VSCode工具，按照imgbutton组件的功能点来介绍自定义组件的开发过程。 下载自定义组件模板，将自定义组件模板包解压。

查看更多 →

在菜单栏中，选择“高级设置”。 在“兼容性设置”页签中，开启“页面组件的渲染框架由Vue2升级为Vue3”开关。 图1 高级设置 当前版本的高级页面中，提供了Vue2和Vue3两种框架的组件，如果需要使用Vue2框架的组件，需要关闭“页面组件的渲染框架由Vue2升级为Vue3”，否则会提示图2中信息。 图2 界面报错

查看更多 →

zip)”，选择6中的商品列表组件包commodityListWidget.zip，输入发行说明为“commodityListWidget”，单击“提交”。 关闭Vue3框架渲染组件开关。 本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手

查看更多 →

生命周期介绍 setup：在组件创建时执行。 onBeforeMount：在组件被挂载之前执行。 onMounted：在组件挂载完成后执行。 onBeforeUpdate：在组件更新之前执行。 onUpdated：在组件更新完成后执行。 onBeforeUnmount：在组件被卸载之前执行。

查看更多 →

自定义组件运行指标 容器部署方式创建并部署的组件，您可以进入组件“指标图表”页面，自定义需要查看的组件运行指标。 前提条件 待操作的容器部署方式部署的组件已存在。使用容器部署方式部署组件，请参考： 使用容器部署方式基于界面配置创建并部署组件 使用容器部署方式基于YAML配置创建并部署组件

查看更多 →

设置组件自定义指标监控 ServiceStage支持获取容器部署组件时自定义指标，您可使用该方式上报自定义的组件运行指标。 注意事项 当前仅支持获取prometheus的Gauge指标类型。 在设置应用组件自定义监控前，您需先了解prometheus，并在您的应用组件中提供获取自

查看更多 →

上传自定义登录组件 自定义登录组件开发完成，并上传到AstroZero后，才能通过高级页面调用。 您可以直接使用文中提供的已开发完成的登录组件，上传到AstroZero中。也可以自行在AstroZero上，下载自定义组件模板，进行线下开发，然后再上传到AstroZero中。 操作步骤

查看更多 →

在开发高级页面过程中，系统为页面组件和桥接器提供了一些预置API。 组件 在开发自定义组件时，需要定义“组件名.js”文件，该文件为组件逻辑文件，是整个组件的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明，请参见表1。 表1 组件名.js中预置API说明

查看更多 →

环境准备安装 开发者工具 生成组件包组件开发预览组件发布组件进入NodeJS官网，下载并安装适合自己操作系统的NodeJS版本。NodeJS支持Windows、MacOS或Linux操作系统。登录 DLV 管理控制台，进入我的组件页面，单击页面右上角的下载开发者工具按钮，下载包名如dlv-cli-x.x.x的开发者工具，其中包名中的x.x.x代表

查看更多 →