\r\n\r\n```\r\n\r\n **2.0.1-beta** \r\n\r\n```\r\n1、修改发布样式问题。\r\n2、优化判断默认值方法，规避默认值为false的时候判断为没有默认值\r\n\r\n\r\n```\r\n\r\n **2.0.0-beta** \r\n\r\n```\r\n1、增加自定义组件，可以通过配置放入加入自定义组件，通过插槽来对自定义组件的属性进行配置。\r\n\r\n\r\n```\r\n\r\n **1.0.14** \r\n\r\n```\r\n1、修复checkbox、radio、select组件的远程方法调用问题，增加dataPath参数将远程请求的数据通过json的path取值来获取列表。\r\n2、对栅格布局、表格布局、动态表格中点击复制后组件内部的子组件原样复制。\r\n3、修复选择后回调的参数名称，以及静态数据也可以进行选择后回调。\r\n4、选择后回调进行强制刷新，规避偶尔通过值等方式无法触发监听进行渲染页面。\r\n5、对input的show-word-limit 显示条件进行修改，规避某些清空下配置未填写导致显示异常。\r\n\r\n```\r\n \r\n\r\n\r\n\r\n##示例\r\n\r\n **基础表单** \r\n ![基础表单](https://s3.ax1x.com/2020/12/22/rrcpkT.gif \"basic.gif\")\r\n\r\n\r\n **表单验证和组件动态显示** \r\n![表单验证和组件动态显示](https://s3.ax1x.com/2020/12/22/rr6x00.gif \"validator1.gif\")\r\n\r\n\r\n **动态表格** \r\n![动态表格](https://s3.ax1x.com/2020/12/22/rrc9tU.gif \"tablebatch.gif\")\r\n\r\n\r\n## 简介\r\n\r\n基于vue和element-ui实现的表单设计器。通过拖拽方式快速生成一个表单页面，表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。\r\n\r\n## 和其他开源表单的差异\r\n \r\n- 每个组件可以动态隐藏和显示，并且提供除了“必填”以外的多种规则验证，支持表达式验证和正则验证\r\n- 隐藏的组件绑定值可以配置不输出，减少输出数据大小\r\n- 针对选择性控件（radio，select，checkbox）提供选择后触发调用，支持表达式。对选择性控件支持数据联动功能，通过此功能可以做多级联动\r\n- 动态表格提供单独的弹框进行填写和编辑\r\n- 布局方式多样化，提供栅格，表格等多种布局方式 \r\n- 支持表单预览模式，表单内容全部非组件化，全部文本显示\r\n- 针对选择性控件（radio，select，checkbox）选择后将对应的label进行单独存储，方便展示\r\n\r\n \r\n\r\n## 组件\r\n- FormDesign 表单设计器（基于可视化操作快速设计出表单页面，生成配置json或页面）\r\n- FormBuild 表单构建器（根据设计器中获取的配置json数据，快速构建出表单页面，添加readonly属性后展现预览表单）\r\n\r\n## CDN 直接使用\r\n\r\n```\r\n \r\n\r\n\r\n\r\nvue-drag-formdesign \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n\r\n \r\n \r\n \r\n vue-drag-formdesign 示例 \r\n \r\n \r\n
\r\n\r\n\r\n\r\n```\r\n\r\n**详情可参考项目中 form-cdn.html**\r\n\r\n\r\n\r\n## 安装\r\n```\r\nnpm install --save vue-drag-formdesign \r\n\r\n```\r\n## 引用\r\n```\r\n // 导入组件库\r\nimport VueDragFormdesign from 'vue-drag-formdesign'\r\nimport 'vue-drag-formdesign/lib/vue-drag-formdesign.css'\r\n```\r\n\r\n## 注册\r\n``` \r\n// 注册组件库\r\nVue.use(VueDragFormdesign) \r\n\r\n```\r\n\r\n### 页面引用\r\n```\r\n \r\n \r\n
\r\n```\r\n \r\n### API 说明\r\n# 1. 表单绘制组件 VueDragFormdesign \r\n\r\n方法:\r\n\r\n| 方法名称 | 参数| 说明 |\r\n|-----------|--------|-------------------------|\r\n| initModel | json | 初始化动态表单内容，参数为动态表单json模板|\r\n| getModel| N/A| 返回当前正在编辑得动态表单信息|\r\n\r\n属性: \r\n\r\n| 属性名 | 说明 | 格式| 默认值 | \r\n|-----------|------------------------------|--------|----------|\r\n| customComponents | 自定义组件的配置,具体参加最下方自定义组件示例中的格式 | array | N/A | \r\n| config|表单的一些基础配置，主要为http的一些参数,譬如在http请求中给header增加参数：config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } }| object | N/A |\r\n| clear| 是否显示面板上清除按钮 |boolean | true |\r\n| preview| 是否显示面板上预览按钮 |boolean | true |\r\n| reder| 是否显示面板上渲染按钮 |boolean | true |\r\n| imp| 是否显示面板上导入按钮 |boolean | true |\r\n| exp| 是否显示面板上导出按钮 |boolean | true |\r\n\r\n \r\n\r\n插槽:\r\n\r\n| 插槽名称 | 说明 |\r\n|-----------|-------------------------|\r\n| drag | 左侧组件面板插槽，可以在组件面板上面填充一个区域展示内容|\r\n| formName | 当前动态表单名称|\r\n| controlButton | 功能区按钮,如果需要自定义功能按钮可以在这里自定义 |\r\n \r\n\r\n 插槽示例:\r\n ```\r\n \r\n \r\n 示例1\r\n 示例2\r\n 示例3\r\n \r\n \r\n vue-drag-formdesign 示例 \r\n \r\n \r\n ```\r\n\r\n# 2. 表单查看/填报组件 VueDragFormBuild \r\n\r\n方法:\r\n\r\n| 方法名称 | 参数| 说明 |\r\n|-----------|--------|-------------------------|\r\n| reset | N/A | 重置动态表单内容|\r\n| validator| N/A| 根据设置的规则验证当前表单内容,返回Promise|\r\n| getData | N/A | 表单验证后,获取当前表单数据,返回Promise | \r\n \r\n\r\n属性: \r\n\r\n| 属性名 | 说明 | 格式| 默认值 | \r\n|-----------|------------------------------|--------|----------|\r\n| formTemplate | 表单模板 | json | 无 |\r\n| models | 表单填充数据 | json | 无 |\r\n| disabled | 是否禁用 | boolean | false |\r\n| renderPreview | 当前是否为预览模式 | boolean | false |\r\n| config|表单的一些基础配置，主要为http的一些参数,譬如在http请求中给header增加参数：config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } }| object | N/A |\r\n| customComponents | 自定义组件的配置,具体参加最下方自定义组件示例中的格式 | array | N/A | \r\n \r\n \r\n\r\n 使用示例:\r\n ```\r\n \r\n \r\n \r\n
\r\n \r\n \r\n\r\n ```\r\n\r\n\r\n# 3. 自定义组件示例 \r\n\r\n3.1 自定义一个组件（根据文本中输入的地址展示图片）\r\n\r\n```\r\n\r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n```\r\n\r\n3.2 定义一个自定义组件的属性配置组件（后面通过插槽挂到表单绘制面板的属性面板中）\r\n\r\n```\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n```\r\n\r\n3.3 在动态表单绘制面板中进行配置\r\n\r\n```\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n vue-drag-formdesign 示例 \r\n \r\n \r\n
![\"vue-form-design\"](\"//pub.idqqimg.com/wpa/images/group.png\" "\\"vue-form-design\\"")
","readmeFilename":"README.md"}