1.1.8 • Published 3 years ago
avue-form-design-esh v1.1.8
简介
本项目是一款基于 Avue 的表单设计器,拖拽式操作让你快速构建一个表单。
依赖
element-ui 2.12.0+
说明
个人基于avue-form-design 进行修改,新增英文标题 labelEN select等拉取远端数据的时候,渲染需要props:{label:'',value:''} 新增表格配置
使用
import AvueFormDesign from 'avue-form-design-esh'
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 | - | '清空' |
具体参考avue官方配置文档
事件
名称 | 说明 | 回调参数 |
---|---|---|
submit | 生成json回调 | 当前配置的json |