@ttkj/avue-form-design v1.7.7

简介

基于@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>

属性

customFields使用方法

customFields可以直接是表单组件配置，也可以是一个分组

options字段配置

Avue文档

defaultValues配置

defaultValues是一个数组。

fieldConfigs说明

fieldConfigs对表单组件配置属性的配置。涵盖了内置组件和自定义组件。

key为组件类型，value为配置项。配置项如下：

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: ''      // 事件默认模板
            }
          }
        }
      }
    }
  }
}

事件

方法

插槽

Avue插件

富文本

import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor)

打包

组件

$ yarn lib

源码

$ yarn build