基于@ttkj/avue的表单设计器
element-ui 2.15.2+
$ npm i element-ui
@ttkj/avue 2.10.23
$ npm i @ttkj/avue
或自行引入cdn
$ npm i @ttkj/avue-form-design
或
$ yarn add @ttkj/avue-form-design
import AvueFormDesign from '@ttkj/avue-form-design'
Vue.use(AvueFormDesign)
<avue-form-design style="height: 86vh;"
:options="options"
storage
@submit="handleSubmit"></avue-form-design>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
options | 字段配置 | Object/String | { column: [] } |
storage | 开启本地存储功能,防止浏览器刷新丢失json | Boolean | false |
asideLeftWidth | 左工具栏宽度 | String/Number | '270px' |
asideRightWidth | 右工具栏宽度 | String/Number | '380px' |
toolbar | 顶部工具栏 | Array | ['avue-doc', 'import', 'generate', 'preview', 'clear'] |
undoRedo | 是否开启撤销重做功能 | Boolean | true |
includeFields | 左侧展示字段 | Array | fieldsConfig.js中配置的字段 |
excludeFields | 左侧禁用字段 | Array | fieldsConfig.js中配置的字段 |
customFields | 自定义组件 | Array | 使用方法见下文 |
customFieldsConfigs | 自定义组件属性配置组件 | Object | 其中key为自定义组件的component,value为组件属性设计器名称 |
defaultValues | 默认值配置 | Object | - |
fieldConfigs | 用于表单设计器组件库属性的配置 | Object | - |
fieldEventConfig | 通用的组件事件配置 | Object | - |
customTransformToAvueOptions | 设计器配置项转avue配置项 | (data, obj) => Promise<object>
|
第一个参数data为内置转化后的option,第二个obj为原始的设计器配置项,返回值是一个Promise,值为avue配置项 |
customTransAvueOptionsToFormDesigner | avue配置项转设计器配置项 | (data, obj) => Promise<object>
|
第一个参数data为内置转化后的option,第二个obj为原始的avue配置项,返回值是一个Promise,值为设计器配置项 |
customFields可以直接是表单组件配置,也可以是一个分组
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 分组名称 | string | 不填则为'自定义' |
sort | 分组排序 | number | 不填按顺序填充到内置组件分组后 |
list | 组件列表 | Array | 表单组件配置列表 |
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
column | Avue字段 | Array | - | [] |
labelPosition | 字段位置 | String | 'left'/'center'/'right' | - |
labelWidth | 字段宽度 | Number | - | - |
gutter | 字段间隔 | Number | - | 0 |
menuBtn | 表单按钮 | Boolean | true/false | true |
submitBtn | 显示提交按钮 | Boolean | true/false | true |
submitText | 提交按钮文本 | String | - | '提交' |
emptyBtn | 显示清空按钮 | Boolean | true/false | true |
emptyText | 清空按钮文本 | String | - | '清空' |
detail | 详情模式 | Boolean | true/false | false |
readonly | 全局只读 | Boolean | true/false | false |
disabled | 全局禁用 | Boolean | true/false | false |
defaultValues
是一个数组。
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 值的类型 | String | String: '字符串', Number: '数值', Boolean: '布尔值',Array: '数组', Object: '对象', Date: '时间类' | - |
label | 显示名称 | String | - | - |
value | 值/表达式 | String | - | - |
fieldConfigs
对表单组件配置属性的配置。涵盖了内置组件和自定义组件。
key为组件类型,value为配置项。配置项如下:
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
column | 展示字段的覆盖配置 | Object | - | - |
config | 设计器的配置 | Object | - | - |
config配置
{
fieldConfigs: {
type: { // 组件type
column: {}, // 组件column覆盖配置
config: { // 设计器配置
icon: '', // 左侧拖拽按钮图标
tip: '', // 左侧拖拽按钮提示
label: '', // 左侧拖拽按钮显示文字
component: '', // 配置组件Name
params: { // 基本属性配置
param: { // 某个属性的配置,如果为boolean,等同于对象下show状态
show: true, // 是否显示配置, 不配置表示显示
disabled: false, // 显示情况下是否可编辑
value: '', // 配置项的默认值
valueType: [], // param为value时的配置,详见默认值配置
... // 其他视属性本身而定
}
},
validate: true, // 是否显示校验栏
dataSubmit: true, // 是否显示数据提交栏
events: { // 事件配置。如果为boolean,等同于对象下show状态
show: true, // 是否显示事件配置, 不配置表示显示
list: [], // 可用的事件
config: { // 事件配置
event: { // 事件ID
id: 'event', // 事件ID
name: '', // 事件名称
note: [ // 事件参数说明
{
name: '', // 参数key
type: '', // 参数字段类型
description: '' // 参数说明
}
],
template: '' // 事件默认模板
}
}
}
}
}
}
}
名称 | 说明 | 回调参数 |
---|---|---|
submit | 生成json回调 | 当前配置的json |
名称 | 说明 | 参数 | 返回 |
---|---|---|---|
getData | 获取当前编辑器的JSON | type: 'string'/'json' | Promise |
名称 | 说明 |
---|---|
toolbar | 顶部工具栏右侧插槽 |
toolbar-left | 顶部工具栏左侧插槽 |
import AvueUeditor from 'avue-plugin-ueditor'
Vue.use(AvueUeditor)
$ yarn lib
$ yarn build