提起表单设计器，网上会有很多，不过能让设计器可视化写脚本的还真是凤毛麟角
直接给大家上地址：http://lowcode.magicalcoder.com/magicaldrag/index-page.html
下面介绍一下这款布局器的特点 先来看一下整体预览
特性：1 支持多种ui element layui
2 支持 二次定制化开发 支持嵌入到您的web系统种 支持扩展基于jquery 或者vue的各种前端开源ui
3 布局器的使用就不细说了 拖拽式开发
4 可视化编写脚本（新特性）
本节主要展现下基于elementui的可视化脚本功能
示例一：点击提交按钮 触发一下 弹出一个 “欢迎使用magicalcoder布局器”
第一步：点击提交按钮 由此编码区域有个按钮点击一下 即可调出可视化脚本编辑器
第二步：我们拖拽一个弹窗工具 然后配置一下要弹出的内容
第三步 保存后我们来点击提交按钮试试看 再点击一下就弹出了我们要的交互内容
示例二： 我们来做一个高级的 当滑块内容变化时 让输入框内容也跟着变化
第一步：点击滑块 右侧的松手触发事件我们来开发
第二步：利用赋值语句 我们让输入框的值=滑块停止时当前的值 注意右侧会有提示
第三步：演示下 当我松开滑块 输入框的值也就跟着变化了
更多场景 还是大家自己去体验吧
http://lowcode.magicalcoder.com/magicaldrag/index-page.html