代码拉取完成，页面将自动刷新
本项目是一款基于 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
$ yarn
$ yarn serve
import AvueFormDesign from 'avue-form-design'
Vue.prototype.$ELEMENT = { size: 'small' }
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' |
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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 |
import AvueUeditor from 'avue-plugin-ueditor'
Vue.use(AvueUeditor)
import AvueMap from 'avue-plugin-map'
Vue.use(AvueMap)
$ yarn lib
$ yarn build
如果你觉得本项目帮助到你的话，可以给作者买杯咖啡。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。