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 低代码平台