共计 1392 个字符,预计需要花费 4 分钟才能阅读完成。
宜搭的外围概念
@[TOC]
全局变量
在左侧数据源中增加变量,增加变量的写法和 js
的写法统一。
根本的变量应用
给文本绑定数据源,点击左侧方才定义的全局变量,应用 state.helloWorld.name
的形式调用变量(对象取值)
预览中查看后果
查看输入内容以及调试形式
在页面公布中复制拜访地址到浏览器就可查看
事件绑定
点击按钮,增加新建动作
这里的动作名称也就是咱们绑定的事件,对于绑定事件的执行以及逻辑,能够在动作面板中编辑。
动作面板中编辑事件逻辑
咱们能够在事件中携带参数,在 js
代码中通过 this.params.xxx
获取对应的数据信息
页面生命周期
didMount: 页面生命周期,第一次渲染实现后调用
willUnmount: 页面卸载前调用的生命周期
须要留神:函数的后面必须增加
export
,否则无奈调用非法的:
export function fn(){console.log("这是一个函数") }
不非法的:
const fn = ()=>{} function fn(){}
条件渲染
在组件的高级配置里有一个是否渲染开关,默认为开启状态,也就是渲染模式
该按钮敞开后,对应的组件不会在页面渲染,咱们能够在组件树上查看该组件是否开启了渲染模式,如果组件树上有一个红色的 icon
图标,则示意开启了条件渲染
条件渲染的应用场景:表单波及到的增加和批改性能,在某些场景下能操作的字段是不同的,所以须要依据对应的状态来判断该字段是否可操作,此处就须要应用条件渲染。
点击中括号,在弹框内设置条件渲染的判断条件
如果全局变量的 helloWorld.name
存在,那么该字段显示,不存在则不显示
循环渲染
当咱们创立一些表格数据的时候,每一行其实是同样的字段,多行显示则能够应用循环渲染。
1、须要应用数据源,这里提供两种数据源,第一种静态数据,第二种动态数据(通过 API
获取),这里以静态数据做演示:
抉择容器组件,在高级选项中设置循环数据的数据源
2、设置遍历的字段信息,这里默认为变量默认为item
,索引默认为index
,你也能够本人设置
3、设置遍历的 dom
以及数据
咱们理论要遍历的是容器,将文本拖入容器中,设置文本的数据源
设置文本的数据源信息,这里的数据援用的就是方才设置的循环变量 item
,此处的item.name
就是咱们要的数据
4、页面预览
自定义款式
抉择对应的组件,抉择右侧的款式,点击源码编辑
这里反对 css
款式,元素默认命名为:
:root
反对伪类、伪元素、动画
表单校验
表单是无奈关联一般按钮的,须要新建表单,在预览的时候自带提交按钮
宜搭提供两种表单校验设置计划
1、内置校验规定,在官网提供的表单校验上配置即可。
2、自定义校验规定
表单分多种场景,官网提供的表单校验不可能齐全笼罩场景,所以须要手动自定义校验规定
勾选自定义函数,编辑自定义函数
function validateRule(value) {
/** value 为输出的值 */
/** 正则校验 - 校验金额 */
if (/^(([0-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/.test(value)) {return true;}
return false;
}
最初附上低代码平台宜搭的官网文档:https://developers.aliwork.com/docs/guide/concept/state
如果感觉这篇文章对你有帮忙,欢送点赞、珍藏、转发哦~