vue 表单拖拽生成器_基于 Avue 拖拽式表单设计器AvueFormDesign

前段时间有分享一个基于ElementUI可视化表单生成器。今天继续给大家分享一款优秀的表单设计器AvueFormDesign。avue-form-design 基于Avue构建的多功能表单设计器。拖拽式操作让您快速制作一个FORM表单。安装依赖$ npm i element-ui -S$ npm i @smallwei/avue -S安装表单组件$ npm i @sscfaith/avue-for

十八线编剧田锦鲤

6160人浏览 · 2021-01-26 11:22:02

十八线编剧田锦鲤 · 2021-01-26 11:22:02 发布

前段时间有分享一个基于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

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

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}$/, //不连续的两位字母// /^