FormMaking 可視化表單設計器自定義組件配置

介紹

先來個簡單的介紹，FormMaking 可視化表單設計器，基於Vue的表單設計器，讓表單開發簡單而高效。

官網地址：http://form.making.link

文檔地址：http://docs.form.making.link

表單設計器內置的組件很多時候不能滿足到客戶的需求，這個時候就需要自己定義一些組件來進行配置。接下來看看我們的處理方法：

作用域插槽

最開始我們在設計器中採用作用域插槽的方式，給生成器預留了插槽，可以在生成器配置的時候引入自己的組件，做到自定義，具體方法如下：

1. 拖拽【自定義區域】放入編輯區域。
   

2. 根據你需要放入到該區域的字段選擇類型。

3. 點擊【生成代碼】可快速查看，通過編碼方式放入自己的組件。

這樣來進行自定義組件的加入，需要在生成器中編寫代碼來實現，不是很友好，接下來介紹下更好的方法。

動態組件

最新版本我們引入了動態組件來實現。在設計器中進行自定義組件的配置，在設計中即可查看效果。

設計器字段動態配置

最新版本中我們還提供了設計器字段的動態配置，效果圖如下：

如何實現的請看下面簡單介紹：

1. 簡單實現一個自定義的組件

<template>
  <div class="custom-component">
    <span>
      寬：<el-input v-model="dataModel.width" style="width: 200px;"></el-input>
    </span>
    <span>
      高：<el-input v-model="dataModel.height" style="width: 200px;"></el-input>
    </span>
  </div>
</template>

<script>
export default {
  name: 'custom-width-height',
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dataModel: this.value
    }
  },
  watch: {
    value (val) {
      this.dataModel = val
    },
    dataModel (val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss">
.custom-component{
  background: #eee;
  padding: 10px;

  span{
    +span{
      margin-left: 10px;
    }
  }
}
</style>

需要注意，自定義組件必須能夠使用 v-model 進行雙向綁定，如果還不知道如何創建，可以自行先閱讀 Vue.js 文檔。

2. 註冊組件

Vue.use(FormMaking, {
  components: [{
    name: 'custom-width-height',
    component: CustomComponent // 自定義組件
  }]
})

也可以使用 Vue.component 進行組件的註冊

3. 設計器配置

<template>
  <fm-making-form
    :custom-fields="customFields"
  >
  </fm-making-form>
</template>

<script>
export default {
  data() {
    return {
      customFields: [
        {
          name: '自定義組件', // 字段名稱
          el: 'custom-width-height', // 組件註冊的名稱
          options: {
            defaultValue: {}, // 默認值
            customClass: '', // 自定義樣式
            labelWidth: 100, // 標籤寬度
            isLabelWidth: false, // 是否展示標籤
            hidden: false, // 隱藏屬性
            dataBind: true, // 數據綁定屬性
            required: false, // 必填校驗
            dataType: '', // 數據類型校驗
            pattern: '', // 正則表達式校驗
          }
        }
      ]
    }
  }
}
</script>

結束語

通過自定義組件，可以實現引入自己想要的各種組件（包括圖表和移動端），只需要簡單配置就行。

更多的功能可以進入官網體驗。