为Vue3”开关。 图6 取消选中 在应用设计器中，选择“界面”，单击高级页面后的“+”，新建一个高级页面。 单击，从“全部 > 自定义”中拖拽widget_demo_mintui组件到右侧画布中。 图7 拖拽组件到画布中 单击页面上方的，保存高级页面后，单击，发布高级页面。 单

查看更多 →

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

查看更多 →

"css/index" } ] } 上传自定义库。 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在主菜单中，选中“我的资产”。 在左侧导航栏中，选择“我的库”，单击“添加库”。 单击，选择待上传的库，并设置库的基本信息。 图2 上传自定义库

查看更多 →

一般保持默认“通用”，在组件列表中可基于领域进行分类展示。 场景 该组件包的应用场景。勾选后，在相应类型页面开发中，才可使用该组件。 本示例配置为业务大屏、高级页面和业务小屏。 发行说明 组件的描述信息。 在高级页面、大屏页面或者小屏页面中拖入该组件，预览组件效果。 例如，进入Astro

查看更多 →

} }) 将修改后的组件Widget包，重新打包。 参考开发高级组件中操作，将高级页面组件包上传至组件库中，在页面上中添加该高级页面组件。 当高级页面中拖入widget_demo_mintui高级页面组件后，即可在“页面设置 > 资源”中发现Vue库和MintUI库已加载，表示引用成功。

查看更多 →

> 环境配置”，进入环境配置。 在顶部主菜单中，选择“维护”。 在左侧导航栏中，选择“全局元素> 页面资产管理 > 库”。 在库列表中，单击对应的库，进入库详情页面。 在库详情页单击“下载”，即可下载库到本地。 您也可以在“更改历史”页签中，查看该库的历史版本（按照版本依次排序显示

查看更多 →

}); 上述代码中定义的展示图片文件可使用其他图片代替，将图片放到DisplayWidget目录中即可正常使用。 本示例代码中，widgetBasePath变量为组件包上传后的路径，在组件模板中已包含获取此变量的逻辑，在此直接使用即可（此例也展示了组件中如何引入本地图片的基本方法）。

查看更多 →

} 上述代码中定义的展示图片文件可使用其他图片代替，将图片放到DisplayWidget目录中即可正常使用。 本示例代码中，widgetBasePath变量为组件包上传后的路径，在组件模板中已包含获取此变量的逻辑，在此直接使用即可（此例也展示了组件中如何引入本地图片的基本方法）。

查看更多 →

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

查看更多 →

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

查看更多 →

拖入分栏组件到页面中，并在分栏组件的“属性 > 样式 > 布局”宽度设置为240像素，如图21调整分栏组件所示。 关于分栏组件的详细介绍请参见分栏。 图22 调整分栏组件 将自定义组件“imgButton”拖入到“分栏 > 栏”中，分别拖入到分栏的两个栏中，如图22拖入自定义组件所示。 设置组件的属性，

查看更多 →

引入AICC.Support.js 打开需要集成到云客服的HTML页面。 在需要集成的页面引入AIC CS upport.js，如在html中使用： <script type="text/javascript" src="https://ip:port或 域名 /service-cloud/resource

查看更多 →

width：在绝对布局高级页面中，添加该组件时的默认宽度，单位为px，不填写默认为200px（本例模板中未体现）。 height：在绝对布局高级页面中，添加该组件时的默认高度，单位为px，不填写默认为200px（本例模板中未体现）。 messages-zh/messages-en.json 组件的国际化

查看更多 →

在页面JS中定义其他的变量。 页面JS中可以通过this访问当前页面的state，全局的stores， 以及t函数（获取国际化词条）。 下面将通过两个示例分别展示如何使用。 为组件添加单击事件 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台

查看更多 →

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

查看更多 →

width：在绝对布局高级页面中添加该组件时的默认宽度，单位为px，不填写默认为200px（本例模板中未体现）。 height：在绝对布局高级页面中添加该组件时的默认高度，单位为px，不填写默认为200px（本例模板中未体现）。 messages-zh/messages-en.json 组件的国际化资

查看更多 →

，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。 图5 界面报错 在应用设计器中，单击左侧导航栏中的“设置”。 在“高级设置”中，取消勾选“页面组件的渲染框架由Vue2升级为Vue3”开关。 图6 取消选中 在应用设计器中，选择“界面”，单击高级页面后的“+”，新建一个高级页面。

查看更多 →

染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。 图4 界面报错 在应用设计器中，单击左侧导航栏中的“设置”。 在“高级设置”中，取消勾选“页面组件的渲染框架由Vue2升级为Vue3”开关。 图5 取消选中 在应用设计器中，选择“界面”，

查看更多 →

关闭Vue3框架渲染组件开关 本案例所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。 图1 界面报错 操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在

查看更多 →

径。 i18n：指定组件的国际化资源文件。本例模板中未体现。 requires：依赖的库名称和版本号。 width：在绝对布局高级页面中添加该组件时的默认宽度，单位为px，不填写默认为200px。本例模板中未体现。 height：在绝对布局高级页面中添加该组件时的默认高度，单位为

查看更多 →

编辑页面，粘贴到代码编辑区进行使用。 给组件绑定JS方法 在页面JS中添加脚本并保存。 function exampleFunction() { // JS逻辑 } 选中画布中已有的组件元素。 在右侧“高级”设置面板中，鼠标移动至添加按钮上，弹出可添加事件的菜单栏（若没有

查看更多 →