1.0.11 • Published 5 years ago

dg-form-making v1.0.11

Weekly downloads
3
License
LGPL
Repository
-
Last release
5 years ago

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

npm.io

特性

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

文档

高级字段使用

社区资料笔记

支持

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

捐赠

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

npm.io

开源协议

LGPL

商业许可

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

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago