表单设计器（自定义区域）

自定义区域

绑定动态数据

该组件，可以在html中添加自定义表单内容，原理相当于是引入一个作用域插槽，可以为表单引入自定义的内容，关于作用域插槽的使用，可以查看如下 文档。

引入自定义组件
1拖拽【自定义区域】放入编辑区域
选择绑定值的数据类型

2. 根据你需要放入到该区域的字段选择类型
3. 点击【生成代码】可快速查看，通过编码方式放入自己的组件

<!-- 添加如下代码 -->
<fm-generate-form>
  <template slot="blank_1565316398399" slot-scope="scope">
    <!-- 自定义 -->
    <!-- 通过 v-model="scope.model.blank_1565316398399" 绑定数据 -->
    宽度：<el-input v-model="scope.model.blank_1565316398399.width" style="width: 100px"></el-input>
    高度：<el-input v-model="scope.model.blank_1565316398399.height" style="width: 100px"></el-input>
  </template>
</fm-generate-form>

4. 完成引入，预览一下查看效果

引入静态内容

静态内容即不用绑定数据的内容，在【操作属性】中去掉【数据绑定】选择。

1. 拖拽自定义区域字段到编辑区，去掉【数据绑定】勾选。
2. 点击【生成代码】复制修改代码

<fm-generate-form 
  :data="jsonData" 
  :remote="remoteFuncs" 
  :value="editData" 
  ref="generateForm"
>
    <template slot="blank" slot-scope="scope">
      <!-- 自定义区域 -->
      这是一段静态文本
    </template>
</fm-generate-form>

3. 预览查看效果

4. 获取数据将不会获取到自定义静态区域的数据

{
  "input_1566990348038": ""
}