检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
关闭Vue3框架渲染组件开关 本案例所涉及到的自定义组件是基于Vue2框架开发的,而系统是默认开启Vue3框架渲染组件的,所以您需要手动关掉Vue3框架渲染组件开关,否则拖拽组件到页面时会提示如下报错。 图1 界面报错 操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在
在“兼容性设置”页签中,开启“页面组件的渲染框架由Vue2升级为Vue3”开关。 图1 高级设置 当前版本的高级页面中,提供了Vue2和Vue3两种框架的组件,如果需要使用Vue2框架的组件,需要关闭“页面组件的渲染框架由Vue2升级为Vue3”,否则会提示图2中信息。 图2 界面报错
新窗口:在新窗口页,显示跳转页面。 当前框架:在当前框架,显示跳转页面。 父框架:在父框架区域,显示跳转页面。 当前窗口:在当前整个窗口,显示跳转页面。 分隔符:菜单名之间的分隔符。 跳转:单击面包屑组件的菜单标签,是否开启自动跳转,默认开启。如果不开启跳转,可在“事件”页签定义跳转的实现方法,即进行事件编排。
组件的描述信息,按需进行设置。此处配置的信息,将会在组件详情页的“概况”页签中进行显示。 自定义组件 关闭Vue3框架渲染组件开关。 本实践所涉及到的自定义组件是基于Vue2框架开发的,而系统是默认开启Vue3框架渲染组件的,所以您需要手动关掉Vue3框架渲染组件开关,否则拖拽组件到页面时会提示如下报错。 图5 界面报错
二维码用于根据文本内容或链接地址生成二维码,用户通过微信或支付宝扫描二维码,可查看到文本内容或者跳转到相应的链接。 图1 二维码 数据绑定 通过建立不同类型的视图模型,将各种数据源和组件的返回值或者属性值进行关联,实现动态数据效果。 值绑定:值绑定类似vue中的v-model语法,组件上创建双向数据绑定。值绑定会根据
如何制作/发布/安装解决方案 AstroZero支持在开发环境中制作并发布整体的解决方案包,解决方案中会涉及到多个应用,其他用户可以安装该解决方案包进行使用。 制作并发布解决方案 制作、发布并安装解决方案在开发环境管理中心设置,运行环境和沙箱环境中没有“解决方案”菜单设置页。 参
什么是Addon应用 当需要基于已有资产包类型的应用或解决方案(不是单一的应用,某一解决方案会涉及到多个应用)进行定制时,可以选择Addon应用类型创建应用。 使用该方式创建的应用,会继承原有应用或者解决方案包里的应用设置,如站点设置、导航条等,可将原有应用或者解决方案包里应用的组件资产添加到Add
组件的描述信息,按需进行设置。此处配置的信息,将会在组件详情页的“概况”页签中进行显示。 自定义组件 关闭Vue3框架渲染组件开关。 本实践所涉及到的自定义组件是基于Vue2框架开发的,而系统是默认开启Vue3框架渲染组件的,所以您需要手动关掉Vue3框架渲染组件开关,否则拖拽组件到页面时会提示如下报错。 图5 界面报错
组件的描述信息,按需进行设置。此处配置的信息,将会在组件详情页的“概况”页签中进行显示。 自定义组件 关闭Vue3框架渲染组件开关。 本实践所涉及到的自定义组件是基于Vue2框架开发的,而系统是默认开启Vue3框架渲染组件的,所以您需要手动关掉Vue3框架渲染组件开关,否则拖拽组件到页面时会提示如下报错。 图4 界面报错
大小:分页显示大小,可选值为“小”和“默认”。 简洁版:是否简洁版显示分页样式。 AUI风格:是否展示AUI风格。 显示跳转:是否显示跳转,显示后可设置快速跳转到某一页。 显示分页:是否显示分页,显示后可设置具体的分页大小。 公共 控件名称:当前组件的名称。 隐藏:是否隐藏该组件
zip)的widget_demo_mintui.js的render方法中新增Vue实例。 Vue.use(MINT); var vm = new Vue({ el: $("#widget_demo_mintui"
Homepage”后的齿轮图标,选择新建动作的类型。 图14 新建动作 选择“新建动作 > 默认 > 页面跳转”,进入跳转编辑页面。 图15 编辑页面跳转 这里选择的高级页面是之前创建并发布的“Home”,在实际开发过程中,可以根据业务需要,选择跳转到需要的页面,或者执行自定义的业务逻辑。 在上述步骤完成后,单击Lo
使用AstroZero创建扩展应用 当需要基于已有资产包类型的应用或解决方案(不是单一的应用,某一解决方案会涉及到多个应用)进行定制时,可以选择创建扩展类型应用。 使用该方式创建的应用,会继承原有应用或者解决方案包里的应用设置,如站点设置、导航条等,可将原有应用或者解决方案包里应用的组件资产添加到扩展应用里进
图1 视频播放 数据绑定 通过建立不同类型的视图模型,将各种数据源和组件的返回值或者属性值进行关联,实现动态数据效果。 值绑定:值绑定类似vue中的v-model语法,组件上创建双向数据绑定。值绑定会根据组件类型,自动选取正确的方法来更新元素。同时,负责监视各类引起绑定数据变化的事件以更新数据。
zip”,请解压该包。 修改解压后的“Vue3Navigator_Widget.js”文件。 “Vue3Navigator_Widget.js”文件是Widget逻辑文件,整个Widget的渲染核心JS。“路由导航(示例)”组件是基于Vue Router( Vue.js官方的路由管理器)开发的,请参考Vue
图1 表格组件 数据绑定 通过建立不同类型的视图模型,将各种数据源和组件的返回值或者属性值进行关联,实现动态数据效果。 值绑定:值绑定类似vue中的v-model语法,组件上创建双向数据绑定。值绑定会根据组件类型,自动选取正确的方法来更新元素。同时,负责监视各类引起绑定数据变化的事件以更新数据。
图1 栅格容器 数据绑定 通过建立不同类型的视图模型,将各种数据源和组件的返回值或者属性值进行关联,实现动态数据效果。 值绑定:值绑定类似vue中的v-model语法,组件上创建双向数据绑定。值绑定会根据组件类型,自动选取正确的方法来更新元素。同时,负责监视各类引起绑定数据变化的事件以更新数据。
获取组件的桥接器属性配置值。 定义组件依赖库及组件在绝对布局中默认尺寸。 本节开发的示例组件TabsWidget依赖Vue和Element库,DisplayWidget依赖Vue库。所依赖的Vue库已在之前选择的组件模板“widgetVueTemplate”中定义,这里只需要在TabsWidget组件包的packageinfo
用于获取组件的桥接器属性配置值。 定义组件依赖库及组件在绝对布局中默认尺寸。 本节开发的示例组件TabsWidget依赖Vue和Element库,DisplayWidget依赖Vue库。所依赖的Vue库已在之前选择的组件模板“widgetVueTemplate”中定义,这里只需要在TabsWidget组件包的packageinfo
复杂的页面拆分成多个低耦合的模块,有助于代码维护。 使用语言 Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是可以自底向上逐层应用Vue。Vue易于上手,也便于与系统进行整合。 开发自定义组件前,请先了解JS和Vue相关知识,具备一定的JS和Vue开发经验。 自定义组件结构 自定义组件包,目录结构如下。