简介

本项目是一款基于 Avue 的表单设计器，拖拽式操作让你快速构建一个表单。 在线预览

依赖

element-ui 2.12.0+

$ npm i element-ui

@smallwei/avue 2.2.0+

$ npm i @smallwei/avue

或自行引入cdn

引入样式 
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

引入组件库 
<script src="https://unpkg.com/element-ui/lib/index.js"></script>


<script src="https://unpkg.com/@smallwei/avue@2.6.0/lib/avue.min.js"></script>

安装

组件

$ npm i avue-form-design
或
$ yarn add avue-form-design

源码

github

$ yarn
$ yarn serve

使用

import AvueFormDesign from 'avue-form-design'

Vue.use(AvueFormDesign)

<avue-form-design :options="options"
                  :aside-left-width="270"
                  :aside-right-width="380"
                  storage
                  @submit="handleSubmit"><avue-from-design>

属性

参数	说明	类型	默认值
options	字段配置	Object	{ column: [] }
storage	开启本地存储功能，防止浏览器刷新丢失json	Boolean	false
asideLeftWidth	左工具栏宽度	String/Number	'270px'
asideRightWidth	右工具栏宽度	String/Number	'380px'

options字段配置

Avue文档

属性	说明	类型	可选值	默认值
column	Avue字段	Array	-	[]
labelPosition	字段位置	String	'left'/'center'/'right'	'left'
labelWidth	字段宽度	Number	-	120
gutter	字段间隔	Number	-	0
menuBtn	表单按钮	Boolean	true/false	false
menuPosition	表单按钮位置	String	'left'/'center'/'right'	'center'
submitBtn	显示提交按钮	Boolean	true/false	false
submitSize	提交按钮大小	String	'medium'/'small'/'mini'	'medium'
submitText	提交按钮文本	String	-	'提交'
emptyBtn	显示清空按钮	Boolean	true/false	false
emptySize	清空按钮大小	String	'medium'/'small'/'mini'	'medium'
emptyText	清空按钮文本	String	-	'清空'

事件

名称	说明	回调参数
submit	生成json回调	当前配置的json

Avue插件

富文本

import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor)

坐标拾取器

import AvueMap from 'avue-plugin-map'

Vue.use(AvueMap)

打包

组件

$ yarn lib

源码

$ yarn build

捐赠

如果你觉得本项目帮助到你的话，可以给作者买杯咖啡。

License

MIT