elementui表单模板_表单⽣成器来啦！
是不是再也不想为了⼀个个简单的表单⼀遍遍复制代码，是不是很羡慕后台的代码⽣成器，属于前端的表
单⽣成器终于来啦！让我们⼀起来“康康”我们的表单⽣成器吧。
1
表单⽣成器能⼲啥？
1.拖拖拽拽绘制表单
2.根据json配置⾃动⽣成表单(element-ui风格)及vue代码
3.web代码编辑器、预览器
代码编辑器怎么下载
主界 ⾯
左边区域为组件选区：⽬前已⽀持基本、常⽤的表单项，包括各种输⼊框、选择器、开关、滑块、上传、富⽂本编辑器还有基本的布局组件等。
中间区域为绘制⾯板，组件选区的组件可以拖动到绘制⾯板上实现效果预览，同时⽀持组件的复制、删除、移动等功能。上⽅还有运⾏、查看json、导出vue⽂件、复制代码、清空的功能。
右边区域为配置表单属性和各组件属性的区域，可根据不同的需求进⾏不同的配置。
点击运⾏按钮呈现的画⾯如下：
左边区域为代码编辑器区域：⽣成的代码可以在此处预览。分为三个tab页：html代码(template代码)，js代码，css代码。
右边区域为表单预览效果，在编辑区编辑后点击刷新也可重新渲染效果。上⽅还有导出⽂件和复制代码的功能。
其他细节功能就不多做介绍了。等上线之后亲⾃体验⼀下吧。
2
关键技术
vuedraggable: 基于Sortable.js的vue组件，⽤以实现拖拽功能。
monaco-editor：仿vs code的web代码编辑器。
架。
js-beautify：代码美化(格式化)⼯具。
clipboard: 剪贴板，实现代码复制功能。
render: vue中的渲染函数，简单理解就是不⽤模板，直接⽤js来创建html。
JSX: JavaScript XML，能让我们在JS中写html标记语⾔。
上⾯这些的⽤法可以移步⽂末百度⽹盘链接中下载ppt查看。代码⽐较复杂，此处不⼀⼀细说。
3
配置json解读
会写配置⽂件是新建⼀个组件最基本的要求，以最简单的⽂本输⼊框为例让我们来看看配置⽂件是怎么写的吧：
{    // 组件的⾃定义配置    __config__: {      label: '单⾏⽂本', // 标题      labelWidth: null, // 标签宽度px      showLabel: true, //是否显⽰标签      changeTag: true, // 是否
代码⽣成器就是根据这些配置项⽣成⼀个输⼊框的，虽然只是⼀个简单的输⼊框，但是配置项并不少。每个组件的配置项当然也不同，需要
根据你的需求⾃⼰设计哦。
需要⽣成代码的话需要再根据配置⽂件写这么⼀段：
'el-input': el => {    const {      tag, disabled, vModel, clearable, placeholder, width    } = attrBuilder(el)    const maxlength = el.maxlength ? `:maxlength="${el.maxle 上⾯就是根据配置⽂件的内容⽣成相对应的代码。虽然乍⼀看不好读，但其实简单理解，就是根据配置项社⼯程不同的代码然后拼接起来。
当然代码⽣成器不是万能的，复杂的逻辑和其他功能还是要⾃⼰写的。
4
参考资料
Form-generator
Vue渲染函数&JSX
Monaco-editor
Draggable
ppt百度⽹盘链接
提取码：k2ja
END

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。