简介

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

依赖

$ cnpm install

源码

github

$ yarn
$ yarn serve

html

详见examples

使用

cnpm install reda-form-design --save-dev

main.js 中：

import formDesign from 'reda-form-design/packages'
Vue.use(formDesign)

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

<avue-form-design style="height: 100vh;"
  :options="options3"
  @submit="handleSubmit3"
  storage
  show-avue-doc
  :custom-fields="customFields3"></avue-form-design>


data: () {
  return {
    customFields3: [
      {
        title: '分割线',
        component: 'el-divider',//ele分割线
        span: 24,
        icon: 'el-icon-eleme',
        tips: '看我：自定义属性怎么用？',
        params: {
          html: '<h3 style="color:red">分割线标题</h3>',
          contentPosition: "left",
        }
      },
      {
        title: '警告',
        component: 'el-alert',
        labelWidth: '0',
        span: 24,
        icon: 'el-icon-warning',
        tips: '看我：自定义事件怎么用？',
        params: {
          title: '警告警告警告警告',
          type: 'success'
        },
        event: {
          close: () => {
            console.log('alert关闭事件')
          }
        }
      },
    ],
    options3: {
      column: [
        {
          type: 'url',
          prop: 'url',
          label: '超链接',
          icon: 'icon-url',
          value: 'http://www.baidu.com',
          span: 24,
          display: true
        },
        {
          prop: 'img',
          type: 'img',
          label: '图片',
          span: '24',
          display: true
        }
      ]
    }
  }
}

methods: {
  handleSubmit3(val) {
    this.$message.success("查看控制台")
    console.log(val);
  }
}
  

属性

| 参数 | 说明 | 类型 | 默认值 | | ------ | ------ | ------ | ------ | | options | 字段配置 | Object | { column: [] } | | storage | 开启本地存储功能，防止浏览器刷新丢失json | Boolean | false | | asideLeftWidth | 左工具栏宽度 | String/Number | '270px' | | asideRightWidth | 右工具栏宽度 | String/Number | '380px' | | showAvueDoc | 是否显示Avue文档 | Boolean | false | | showGithubStar | 是否显示GitHub Star | Boolean | true | | undoRedo | 是否开启撤销重做功能 | Boolean | true | | includeFields | 左侧展示字段 | Array | fieldsConfig.js中配置的字段 | | customFields | 自定义组件 | Array | 使用方法 |

options字段配置

Avue文档

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | ------| ------ | ------ | ------ | ------ | | column | Avue字段 | Array | - | [] | | labelPosition | 字段位置 | String | 'left'/'center'/'right' | 'left' | | labelWidth | 字段宽度 | Number | - | 120 | | gutter | 字段间隔 | Number | - | 0 | | menuBtn | 表单按钮 | Boolean | true/false | false | | submitBtn | 显示提交按钮 | Boolean | true/false | false | | submitText | 提交按钮文本 | String | - | '提交' | | emptyBtn | 显示清空按钮 | Boolean | true/false | false | | emptyText | 清空按钮文本 | String | - | '清空' | | tabs | 多分组转标签 | Boolean | true/false | false | | detail | 详情模式 | Boolean | true/false | false | | readonly | 全局只读 | Boolean | true/false | false | | disabled | 全局禁用 | Boolean | true/false | false |

事件

| 名称 | 说明 | 回调参数 | | ------ | ------ | ------ | | submit | 生成json回调 | 当前配置的json |

Avue插件

富文本

import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor)

打包

组件

$ yarn lib

源码

$ yarn build

License

MIT