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

aaf3109bb35081c9014853f040ef91a5.png

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

5f9334f368d18e1c156cb214ad0cf9ad.gif

安装依赖

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

安装表单组件

$ npm i @sscfaith/avue-form-design -S
ff7010c0b8576c0f4d15386df1f212c6.png

使用组件

图文编辑器

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

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

属性

992d0c2e6915caa5135710b95f347a58.png

options字段配置

45966d5f1930e23ea48d74708ed3a88e.png
60fb6b791ceaec54aab3dc6753033ee4.png

拖拽式编辑组件

daba79e7465ec61247b90c0d8a19b468.png

表单预览效果

80fcbd79bbfcb15c4565387969489a09.png

表单生成JSON

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

3783bf01710cd9e16cea9f0a7054cfe0.png 
https://ace.c9.io/

最后附上示例及项目地址

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

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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue