vue开源表单设计器（基于Avue拖拽式表单设计器AvueFormDesign）
vue开源表单设计器（基于Avue拖拽式表单设计器AvueFormDesign）options字段配置import AvueUeditor from 'avue-plugin-ueditor' Vue.use(AvueUeditor)属性$ npm i @sscfaith/avue-form-design -S使用组件<template> <div id="app"> <avue-form-design style="height: 100vh;" :options="options" :aside-left-width="275" :aside-right-width="360" storage @submit="handleSubmit">
前段时间有分享一个基于ElementUI可视化表单生成器。今天继续给大家分享一款优秀的表单设计器AvueFormDesign。
avue-form-design 基于Avue构建的多功能表单设计器。拖拽式操作让您快速制作一个FORM表单。
安装依赖
$ npm i element-ui -S
$ npm i @smallwei/avue -S
安装表单组件
$ npm i @sscfaith/avue-form-design -S
使用组件
<template>
<div id="app">
<avue-form-design style="height: 100vh;"
:options="options"
:aside-left-width="275"
:aside-right-width="360"
storage
@submit="handleSubmit">
</avue-form-design>
</div>
</template>
<script>
import AvueFormDesign from '@sscfaith/avue-form-design'
export default {
components: { AvueFormDesign }
data () {
return {}
}
methods: {
// 生成json回调
handleSubmit(data) {
console.log(data)
}
}
}
</script>
图文编辑器
如果需要用到富文本编辑器，需要安装依赖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
好了，就介绍到这里。如果小伙伴们有其它优秀的表单设计器，欢迎交流讨论！
