共计 1676 个字符，预计需要花费 5 分钟才能阅读完成。
Iofod 是一款在线可视化利用开发平台，通过它的两个性能——可视化布局和丰盛的组件元素，你能够疾速输入高质量的复合组件。
前言
随着前端开发业务的需要一直加大，为了开发的高效率和高质量，各位开发者想必曾经开始留神到低代码开发平台并在寻找一款适宜本人的工具——iofod 会是你不二之选。你可能在放心 iofod 上的组件的品质和数量问题，请释怀尝试，近期 iofod 推出 WeUI 系列组件分享，接下来和我一起查看表单构造在 iofod 上是如何疾速搭建的。
WeUI 系列框架介绍
WeUI 是一个小程序的 UI 框架，它领有一套界面设计计划，你只有将其组件一个个拼接到一起，就能让咱们的小程序更加好看。但它应用的是比拟传统的代码，是通过写好的 CSS 和 HTML 去实现。
表单构造的设计和实现
表单是收集用户数据的容器。一个表单通常由表单控件和相干的提示信息组成。表单控件是实现用户输出的组件。根本的表单包含文本框、明码框、单选按钮、复选按钮、下拉列表框、多行文本框、文本域等。
Form
在 iofod 中，有着文本、容器和图片的三大根底组件，在实现比较简单的构造，操作起来还是比拟疾速的，利用可视化编辑区，咱们能够应用鼠标拖拽形式去实现，并在右侧 tab 栏中设置适合的款式，因为是动态的组件，搭建过程这样完结了。选中 form，咱们能够应用快捷键 Ctrl+Shift+ C 将其设置为自定义组件，在设计复合组件时，只需选中拖出应用即可。
选框
![图片]()
在选框中，咱们选用了两种图标进行标识，别离在右上方增加子状态 default:active，设置缩放 1active，设置缩放 1%，另一个示意选中的图标则相同。其中两者的 active 模型值，赋值于 active，设置缩放 1active<ID（父组件）>，这样咱们就能够通过父组件的 active 开关去管制选中图标的显示，另外能够在两种图标增加动效属性使得运行更加晦涩。
接下来，咱们来增加 tap 交互事件去管制触碰带来的抉择反馈，增加断言，if : active==true，则 active == true，则 active==true，则 active == false，否则 $active == true。预览
如果须要复选框 checkbox，这个时候咱们将其设置成自定义组件，须要多少个拉出应用即可，而在单选框 radio 中，咱们要增加一个非凡的模型变量 copy，顾名思义，赋于 copy 上的值代表复制的数量，而你在操作触碰其中一个，便是在与所有 copy 的对象进行互动。这时候就要增加一个子状态 default:i==i == i==active 对其进行辨别，当获取的 i 的值是代表着 copy 对象的沉闷状态，通过设置 default:i==i == i==active 的款式去区别。交互事件的具体设置事项为获取索引值，将获取的值赋值在父组件中，进行去反馈到别的组件的 active 模型上。
开关 switch
switch 开关示意两种互相对抗的状态间的切换，多用于触发【开 / 关】。在表单构造中也有开关的应用，在开与关的两种状态出现不同的信息。Iofod 在设计开关时，只需应用两个容器组件即可搭建。
通过 tap 交互事件去管制 active 的布尔值，从而去扭转容器的子状态变动，两个容器配合动效，就能使 switch 就实现了。
Select 下拉框
在应用下拉框时，个别会配合文本框进行应用，在下拉列表中选取一个进行显示。首先对文本框进行 copy 解决，你会看到一团字体堆在一起，
这种时候就要应用 default:$active 进行区别了，同时增加 active 的模型，通过 active 值去管制显示的文本
这样子设计思路就简略了许多：
给予父组件两种状态和动效，呈现出下拉的动作
通过交互事件 tap 获取索引值管制 active 值
抉择完之后就是回退的动作
具体情况预览如图
结语
Iofod 是一款新上市的低代码开发平台，在将来会一直降级更新并欠缺。在刚刚应用的时候我意外发现 iofod 的可视化和交互方面做得非常杰出与简洁，如果你是一个集体开发者，齐全能够大胆尝试。
相干链接：
- iofod 官网
- iofod 官网文档
- weui 案例
- iofod 低代码平台
