1.0.11 • Published 5 years ago
dg-form-making v1.0.11
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 由于项目在使用中,更改图标名字导致以前的图标显示不出来,改回原来的图标
基于作者之后新增的功能
- 自定义表单字段内容
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,并且需要将该项目用于商业用途且不想保留版权信息(底部“Powered by GavinZhuLei”版权及链接),为保障您的合法权益,需购买商业授权