基于 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

使用组件

<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代码编辑器基于ACE，可对代码进行格式化、压缩、排序、筛选等操作。

https://ace.c9.io/

最后附上示例及项目地址

# 预览地址
https://form.beta.kim/

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

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