bootstrap3 表单构建器_基于 Avue 拖拽式表单设计器AvueFormDesign

前段时间有分享一个基于ElementUI可视化表单生成器。今天继续给大家分享一款优秀的表单设计器AvueFormDesign。

avue-form-design 基于Avue构建的多功能表单设计器。拖拽式操作让您快速制作一个FORM表单。

安装依赖

$ npm i element-ui -S$ npm i @smallwei/avue -S

安装表单组件

$ npm i @sscfaith/avue-form-design -S

使用组件

图文编辑器

如果需要用到富文本编辑器，需要安装依赖avue-plugin-ueditor。

import AvueUeditor from 'avue-plugin-ueditor'Vue.use(AvueUeditor)

属性

options字段配置

拖拽式编辑组件

表单预览效果

表单生成JSON

生成JSON代码编辑器基于ACE，可对代码进行格式化、压缩、排序、筛选等操作。

https://ace.c9.io/

最后附上示例及项目地址

# 预览地址https://form.beta.kim/# 仓库地址https://github.com/sscfaith/avue-form-design

好了，就介绍到这里。如果小伙伴们有其它优秀的表单设计器，欢迎交流讨论！