/avue-form-design

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

Primary LanguageVueMIT LicenseMIT

简介

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

依赖

element-ui 2.12.0+

$ npm i element-ui

@smallwei/avue 2.2.0+

$ npm i @smallwei/avue

或自行引入cdn

安装

组件

$ 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