1 Star 0 Fork 760

空灵孤影 / vue-form-making

forked from GavinZhulei / vue-form-making 
Gitee — Enterprise-level DevOps R&D management platform
Join Gitee
Clone or download
component.zh-CN.md 6.80 KB
Copy Edit Web IDE Raw Blame History
GavinZhulei authored 2020-07-10 12:17 . update dods

组件

表单设计器(MakingForm)

API

Props

参数
说明
类型
默认值
preview 设计器预览操作按钮显示 Boolean fasle
generate-json 设计器生成JSON按钮显示 Boolean false
generate-code 设计器生成代码按钮显示 Boolean false
clearable 设计器清空按钮显示 Boolean false
upload 设计器导入JSON按钮显示 Boolean false
basic-fields 设计器左侧基础字段配置 Array ['input', 'textarea', 'number', 'radio', 'checkbox', 'time', 'date', 'rate', 'color', 'select', 'switch', 'slider', 'text']
advance-fields 设计器左侧高级字段配置 Array ['blank', 'imgupload', 'editor', 'cascader']
layout-fields 设计器左侧布局字段配置 Array ['grid']

Slots

name 说明
action 设计器头部操作按钮自定义区域

方法

通过 ref 可以获取到 MakingForm 实例并调用实例方法

方法名 说明 参数
getJSON 获取设计器配置的JSON数据 -
getHtml 获取设计器生成的可以直接使用的HTML代码 -
setJSON 设置设计器的配置信息 (value) 通过getJSON方法获取的JSON数据
clear 清空设计器 -

代码演示

自定义操作按钮

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
  >
    <template slot="action">
      <!-- 自定义操作区域插槽 -->
      <el-button type="text" icon="el-icon-upload">保存</el-button>
    </template>
  </fm-making-form>
</template>

字段配置

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;"
    :basic-fields="['input', 'textarea']"
    :advance-fields="['blank', 'fileupload']"
    :layout-fields="[]"
  >
  </fm-making-form>
</template>

获取 json 数据

<fm-making-form 
  ref="makingform" 
  style="height: 500px;" 
  preview 
  generate-code 
  generate-json
>
</fm-making-form>
const json = this.$refs.makingform.getJSON()

表单生成器(GenerateForm)

API

Props

参数
说明
类型
默认值
data 表单json配置数据 Object -
value 表单数据 Object -
remote 表单获取数据远端方法 Object {}

Events

事件名
说明
回调参数
on-change 表单数据变化时触发 field: 数据改变的字段标识
value: 数据改变后的值
data: 表单数据

方法

通过 ref 可以获取到 GenerateForm 实例并调用实例方法

方法名 说明 参数
getData 获取表单数据 -
reset 重置表单数据 -

代码演示

表单生成

直接根据设计器中生成的 json 即可渲染出表单,获取表单数据。

<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </div>
</template>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"单行文本","key":"1575897887618","model":"input_1575897887618","rules":[{"type":"string","message":"单行文本格式不正确"}]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        alert(JSON.stringify(data))
      }).catch(e => {
      })
    }
  }
}

加载表单数据

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      :value="editData" 
      ref="generateForm"
    >
    </fm-generate-form>
  </div>
</template>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"名称","key":"1575897887618","model":"name","rules":[{"type":"string","message":"名称格式不正确"}]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
      editData: {
        /* 需要加载的表单数据可以在这里进行设置 */
        name: 'Gavin'
      },
    }
  }
}

表单字段值改变事件

表单字段值改变后会触发 on-change 事件。

<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      @on-change="onChange"
      :value="formData"
      ref="generateForm"
    >
    </fm-generate-form>
  </div>
</template>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"名称","key":"1575897887618","model":"name","rules":[{"type":"string","message":"名称格式不正确"}]},{"type":"text","icon":"icon-wenzishezhi-","options":{"defaultValue":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1575906202073","remoteOption":"option_1575906202073"},"name":"","key":"1575906202073","model":"show","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
      formData: {
        show: ''
      }
    }
  },
  methods: {
    onChange (field, value) {
      if (field == 'name') {
        this.formData.show = value
      }
    }
  }
}
JavaScript
1
https://gitee.com/kjk/vue-form-making.git
git@gitee.com:kjk/vue-form-making.git
kjk
vue-form-making
vue-form-making
master

Search

181749 a2d7925e 1850385 181749 9f8568a7 1850385