检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
选中“按钮”组件,在“事件”页签,单击“点击”后面的“+”号,进入添加动作页面。 输入自定义JS代码,调用库中的方法获取git仓库的地址。 关于fetch的使用方法及介绍,请参考Fetch API。 图9 自定义JS代码 fetch('https://api.github.com/users/chriscoyier/repos')
验。 错误信息:正则表达式校验失败时,提示的错误信息。 自定义校验:是否进行自定义校验,打开后需要设置校验JS代码。当输入框在表单组件中,该设置才会生效。 校验方法:输入JS代码定义校验规则,代码的返回值必须为布尔类型或者对象类型。 布尔类型:返回为“false”表示未通过校验,
标准页面主要适用于对样式要求相对简单的场景(如表单类应用),这种页面一般用于业务数据的增、删、改、查等基础功能,例如绩效管理、请假电子流、健康打卡、在线投票等。标准页面中的组件是基于Vue.js的通用基础组件,常用于管理端表格表单类的页面开发,如布局容器、数据容器、输入、显示、按钮等。 图1 标准页面 高级页面
TabsWidget.js 在开发自定义组件时,需要定义“组件名.js”文件,该文件为组件逻辑文件,是整个组件的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3 组件名.js中预置API说明。 TabsWidget.editor.js 组件属
r/index.js 可选 自定义属性的编辑控件。 custom-panel/index.js 可选 自定义属性的面板。 design-time/index.js 可选 组件设计态。 resources目录 可选 组件相关静态资源,如组件图片。 index.js - 组件运行态。
组件模板”中,可查找并下载组件模板。 图1 事件、动作组件模板 组件模板中包含多种功能的示例组件,可以参考组件模板开发自定义组件,组件模板的下载及说明请参见在线开发高级组件。 在组件模板代码中,包含低代码平台定义的事件、动作的注册和触发API(应用程序接口),详细介绍如表1所示。 表1 事件、动作API说明
json元数据描述文件,在该文件中列出Library包含的js和css文件名,并打成Zip包,如图2。您也可以单击链接,获取该包。 图2 MintUI库文件结构 packageinfo.json中必选要包含待引入的文件。例如,MintUI库需要引入文件“js/index.js”和“css/index.css”,请在packageinfo
TabsWidget.js 在开发自定义组件时,需要定义“组件名.js”文件,该文件为组件逻辑文件,是整个组件的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3 组件名.js中预置API说明。 TabsWidget.editor.js 组件属
解压后目录 userLogin.js:存放vue业务逻辑的代码,请根据业务需求自行开发。 userLogin.ftl:存放html代码,请根据业务需求自行开发。 userLogin.css:存放样式代码,请根据业务需求自行开发。 userLogin.editor.js、packageinfo
验。 错误信息:正则表达式校验失败时,提示的错误信息。 自定义校验:是否进行自定义校验,打开后需要设置校验JS代码。当输入框在表单组件中,该设置才会生效。 校验方法:输入JS代码定义校验规则,代码的返回值必须为布尔类型或者对象类型。 布尔类型:返回为“false”表示未通过校验,
ibrary包含的js和css文件名,并打成Zip包。该场景中Zip包为“MintUI.zip”,单击链接获取该包。 图1 MintUI库文件结构 packageinfo.json包含所要引入的文件。例如,MintUI库需要引入的文件有“js/index.js”和“css/index
中,当设置必填时,输入值为空的情况下,提示的错误信息。 自定义校验:是否进行自定义校验,打开后需要设置校验JS代码。当输入框在表单组件中,该设置才会生效。 校验方法:输入JS代码定义校验规则,代码的返回值必须为布尔类型或者对象类型。 布尔类型:返回为“false”表示未通过校验,
rary包含的js和css文件名,并打成Zip包,如图1。您也可以直接单击MintUI.zip,下载MintUI.zip包 图1 MintUI库文件结构 packageinfo.json包含所要引入的文件。例如,MintUI库需要引入的文件有“js/index.js”和“css/index
主要事件说明 事件编排器说明 如何通过JS代码,实现页面与后台接口间的交互 页面级常见操作 控制组件是否可见可用可编辑 BPM相关预置事件说明 父主题: 标准页面
json元数据描述文件,在该文件中列出Library包含的js和css文件名,并打成Zip包,如图2。您也可以单击链接,获取该包。 图2 MintUI库文件结构 packageinfo.json中必选要包含待引入的文件。例如,MintUI库需要引入文件“js/index.js”和“css/index.css”,请在packageinfo
单击上传按钮上传文件,由于之前在上传事件的自定义JS代码中使用“debugger” 语句设置断点,因此事件代码在执行到debugger语句时会停止执行。 按“F8”可跳转下一个断点,按“F10”可跳转下一行,根据相关数据判断页面逻辑是否正确执行。 图6 调试js代码 调试DOM及样式 在标准页面开发界面,单击,预览标准页面。
示例1:校验输入文字内容长度不能超过10个字符。示例JS代码如下: return value.length <= 10 其中,“value”变量为系统已定义好的,表示输入内容变量,可直接使用该变量 示例2:校验输入文字内容,只能输入大写的“A-Z”,或小写的“a-z”。示例JS代码如下: 返回值类型为布尔:
将介绍高级页面调测的常用工具。对于自定义组件的开发和调试,AstroZero提供Scaffolding脚手架工具,可实现本地开发组件的实时在线调测。对于前台页面中常遇到的样式或功能问题,可借助浏览器内置的开发者工具来对问题进行调试和定位。 前台页面常用调测方法 在高级页面的开发中
件的共享状态,不管组件在页面的哪个位置或层级,任何组件都能获取状态或触发状态改变的动作。全局状态相当于全局变量,属性是私有的,需要在组件的js文件中,使用预置的“this.$mstore.dispatch”方法,来修改状态数据。 思考:什么情况下,应该使用全局状态? 解惑:当页面
添加多个动作,上下拖动可对动作进行排序。如下图所示,给按钮组件设置了“重置表单”和“自定义JS代码”两个动作。在预览页面单击该按钮时,会按照设置的顺序先执行“重置表单”,再执行“自定义JS代码”。 父主题: 添加事件实现AstroZero组件间交互