1 Star 2 Fork 282

oycl / vue-form-design

forked from jjxliu306 / ng-form-element 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

vue-form-design 致力打造开源最强vue动态表单组件

VUE-FORM-DESIGN

组件一览

在线示例 http://211.159.185.23/vue-drag-formdesign/

##示例

基础表单 基础表单

表单验证和组件动态显示 表单验证和组件动态显示

动态表格 动态表格

简介

基于vue和element-ui实现的表单设计器。通过拖拽方式快速生成一个表单页面,表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。

和其他开源表单的差异

  • 每个组件可以动态隐藏和显示,并且提供除了“必填”以外的多种规则验证,支持表达式验证和正则验证
  • 针对选择性控件(radio,select,checkbox)提供选择后触发调用,支持表达式
  • 动态表格提供单独的弹框进行填写和编辑
  • 布局方式多样化,提供栅格,表格等多种布局方式
  • 支持表单预览模式,表单内容全部非组件化,全部文本显示
  • 针对选择性控件(radio,select,checkbox)选择后将对应的label进行单独存储,方便展示

组件

  • FormDesign 表单设计器(基于可视化操作快速设计出表单页面,生成配置json或页面)
  • FormBuild 表单构建器(根据设计器中获取的配置json数据,快速构建出表单页面,添加readonly属性后展现预览表单)

安装

npm install --save  vue-drag-formdesign 

引用

 // 导入组件库
import VueDragFormdesign from 'vue-drag-formdesign'
import 'vue-drag-formdesign/lib/vue-drag-formdesign.css'

注册

// 注册组件库
Vue.use(VueDragFormdesign) 

页面引用

<div id="app"> 
    <VueDragFormdesign  />
</div>

API 说明

1. 表单绘制组件 VueDragFormdesign

Methods:

方法名称 参数 说明
initModel json 初始化动态表单内容,参数为动态表单json模板
getModel N/A 返回当前正在编辑得动态表单信息

Slot:

插槽名称 说明
drag 左侧组件面板插槽,可以在组件面板上面填充一个区域展示内容
formName 当前动态表单名称
controlButton 功能区按钮,如果需要自定义功能按钮可以在这里自定义

插槽示例:

 <VueDragFormdesign >
       <template slot="controlButton" >
           <el-button   type="text" size="medium"  @click="initDemo(1)">示例1</el-button>
           <el-button   type="text" size="medium"  @click="initDemo(2)">示例2</el-button>
           <el-button   type="text" size="medium"  @click="initDemo(3)">示例3</el-button>
       </template>
       <template  slot="formName">
           <span> vue-drag-formdesign 示例 </span>
       </template>
   </VueDragFormdesign> 

2. 表单查看/填报组件 VueDragFormBuild

Methods:

方法名称 参数 说明
reset N/A 重置动态表单内容
validator N/A 根据设置的规则验证当前表单内容,返回Promise
getData N/A 表单验证后,获取当前表单数据,返回Promise
setData json 重新设置当前的表单填写内容

属性:

属性名 说明 格式 默认值
formTemplate 表单模板 json
models 表单填充数据 json
disabled 是否禁用 boolean false
renderPreview 当前是否为预览模式 boolean false

使用示例:

   <template>
     <div id="app"> 
        <VueDragFormBuild  :formTemplate="formTemplate" :models="models"/>
     </div>
   </template>
   <script>
   export default {
     data(){
       return {
         models: {} ,
         formTemplate: {}
       }
     },
     created() {
       this.formTemplate = require('./data/basic.json')
     }
   }
   </script>

交流

点击链接加入qq群聊,可以直接提问及反馈bug 【交流群:203205848】 vue-form-design

MIT License Copyright (c) 2020 刘玉峰 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

动态表单,VUE动态表单。基于vue+element ui实现动态表单组件,通过拖拽组件到面板即可实现一个表单。支持各个组件的动态隐藏显示,动态表格弹窗式维护。致力打造开源最强vue动态表单组件,持续维护。 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/oycl/vue-form-design.git
git@gitee.com:oycl/vue-form-design.git
oycl
vue-form-design
vue-form-design
master

搜索帮助