正在生成
详细信息:
检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
“开发自定义登录组件”步骤可以直接跳过,本示例已为您提供了开发好的自定义登录组件。如果您想要自定义登录组件的开发方法,可参考本章节执行。 自定义登录组件 进入创建“设备维修管理系统”应用中创建的应用。 在左侧资产下的组件模板中,单击widgetVueTemplate,再单击“下载”。 图1 下载组件模板 在弹出的窗口
在基本中,拖拽“记录删除”图元至画布中。 选中记录删除图元,单击,设置基本信息。 表1 基本信息参数说明 参数 说明 标签 设置图元的标签,用于在服务编排设计页面展示。系统会自动填入该值,格式为RecordDelete序号,序号从“0”开始,表示同类型图元序号。 名称 设置图元的名称,名称为图元在服务编排中的
如图2所示。 图2 新建img存在商品图片 在commodityListWidget.js中,新建Commodity对象并为其赋值。 其中,Commodity对象包含三个属性,分别为src(商品图片路径)、title(商品标题)和content(商品描述)。 var vm = new
当前元素盒模型示意图下方,展示了当前元素的宽和高,默认是根据当前布局自适应后的宽高,可以在这里手动输入值配置当前元素的宽和高。 盒模型和宽高配置时,支持“px”、“em”、“%”、“auto”等多种单位。 图19 样式属性配置面板 在“样式 > 高级设置”面板中,可以直接编写CSS代码作用
在基本中,拖拽“记录更新”图元至画布中。 选中记录更新图元,单击,设置基本信息。 表1 基本信息参数说明 参数 参数说明 标签 图元的标签,用于页面显示。系统会自动填入该值,格式为RecordUpdate序号,序号从“0”开始,表示同类型图元序号。 名称 该图元的标识,请确保在当前服务编排中唯一。
单击“上传”,上传自定义组件包“userLogin.zip”。 图4 上传自定义组件 表1 上传组件参数说明 参数 说明 名字 新提交组件的名称,系统会根据组件包名称自动填充。 示例:userLogin 上传源文件 组件源文件包,单击“请选择源文件(.zip)”,选择步骤一:自定义开发组件中的自定义组件登录包。
zip,输入发行说明为“commodityListWidget”,单击“提交”。 关闭Vue3框架渲染组件开关。 本实践所涉及到的自定义组件是基于Vue2框架开发的,而系统是默认开启Vue3框架渲染组件的,所以您需要手动关掉Vue3框架渲染组件开关,否则拖拽组件到页面时会提示如下报错。 图4 界面报错 在应用设计器中,单击左侧导航栏中的“设置”。