dg-form-making

基于 GavinZhuLei/vue-form-making 进行量身开发，感谢 GavinZhuLei/vue-form-making

npm install -S dg-form-making 

字段属性是否显示配置

• 默认全部显示

如下，只显示标题配置

<dg-making-form
  :widgetVisible="{
    title: true,
  }"
> 
</dg-making-form>

widgetVisible: {
  title: true,    // 标题
  width: true,    // 宽
  size: true,     // 大小
  model: true,    // 绑定值
  handle: true,   // 操作属性
  placeholder: true,  // 占位内容
  layout: true,       // 布局方式 
  showInput: true,    // 显示输入框
  min: true,
  defaultValue: true,
  max: true,
  step: true,
  multiple: true,
  allowHalf: true,
  showAlpha: true,
  showLabel: true,
  staticRemoteOptions: true,  // 静态数据与远端数据的配置
  time: true, 
  date: true,
  required: true,   // 必填选项
  reg: true,        // 正则
  upload: true,     // 文件上传配置
}

<template>
  <dg-making-form ref="makingForm" upload preview generate-code generate-json clearable :basic-components="basicComponents">
    <template slot="action">
    </template>
  </dg-making-form>
</template>

<script>
export default {
  data () {
    return {
      basicComponents: [
          {
          type: 'input',
          name: '单行文本',
          icon: 'icon-input',
          options: {
            width: '100%',
            defaultValue: '',
            required: false,
            dataType: 'string',
            pattern: '',
            placeholder: '',
            disabled: false,
          }
        },
        {
          type: 'textarea',
          name: '多行文本',
          icon: 'icon-diy-com-textarea',
          options: {
            width: '100%',
            defaultValue: '',
            required: false,
            disabled: false,
            pattern: '',
            placeholder: ''
          }
        }
      ]
    }
  },
  mounted () {
  }
}
</script>

• 1.0.2 级以前，组件的自定义功能，字段属性按需显示
• 1.0.3 在 Input 值改变时触发事件 @input-change
• 1.0.4 把 所有的基础组件值改变触发事件 change 去掉 1.0.3 的 input-change， 可以动态的配置 远端数据方法
• 1.0.5 增加组件 日期时间选择器, 修复 远端数据方法 在栅格布局出错的问题
• 1.0.6 打包出错，重新打包
• 1.0.7 增加上传文件组件, 校验的触发方式更为 blur
• 1.0.8 增加文字和分割线组件， input 和 textarea 为空时输入框能全部占满
• 1.0.9 由于element-ui版本问题，没有分割线插件问题，写自定义插件
• 1.0.10 取消冒号, 改造图片上传插件和文件上传插件 fileUpload 监听文件上传事件， 更改图标
• 1.0.11 由于项目在使用中，更改图标名字导致以前的图标显示不出来，改回原来的图标

基于作者之后新增的功能

1. 自定义表单字段内容

form-making

基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来

工具地址：http://tools.xiaoyaoji.cn/form

特性

• 可视化配置页面
• 提供栅格布局，并采用flex实现对齐
• 一键预览配置的效果
• 一键生成配置json数据
• 一键生成代码，立即可运行
• 提供自定义组件满足用户自定义需求
• 提供远端数据接口，方便用户需要异步获取数据加载
• 提供功能强大的高级组件
• 支持表单验证
• 快速获取表单数据

文档

• 快速使用
• 组件

高级字段使用

• 自定义扩展
• 图片上传

社区资料笔记

• Vue.Draggable （by @jianhunxia 提供)

• jsonEditor、ace和clipboard （by @jianhunxia 提供)

支持

• 如果你发现了新的 bug，或者有新的 feature request，请新建一个 issue

捐赠

如果觉得还不错，请作者喝杯咖啡吧 ☺

开源协议

LGPL

商业许可

开源版本遵循 LGPL 条款发布，如果您不能接受 LGPL，并且需要将该项目用于商业用途且不想保留版权信息（底部“Powered by GavinZhuLei”版权及链接），为保障您的合法权益，需购买商业授权