form-create 是一個(gè)可以通過 JSON 生成具有動(dòng)態(tài)渲染、數(shù)據(jù)收集、驗(yàn)證和提交功能的表單生成組件。支持3個(gè)UI框架，并且支持生成任何 Vue 組件。內(nèi)置20種常用表單組件和自定義組件，再?gòu)?fù)雜的表單都可以輕松搞定。

雖然form-create已經(jīng)內(nèi)置了許多組件，但如果我們需要的組件不是常規(guī)組件或者內(nèi)置組件效果實(shí)現(xiàn)的不滿意，那我們就需要自定義組件來實(shí)現(xiàn)，畢竟自定義組件的靈活度非常高，能實(shí)現(xiàn)你想要的任何效果。

本文將從如何給表單設(shè)計(jì)器新增一個(gè)自定義組件，并讓form-create展示出來成功提交表單來介紹。

如何給表單設(shè)計(jì)器左側(cè)新增一個(gè)菜單

官方文檔：http://designer.form-create.com/guide/menu.html
官方內(nèi)置了main,aide,layout三個(gè)分組。可以在已有分組中新增菜單，也可以新增分組并添加菜單。

在已有分組中新增菜單

//插入拖拽按鈕到`main`分類下
this.$refs.designer.appendMenuItem('main', {
	icon: 'icon-checkbox',
	name: 'checkbox',
	label: '單選框'
})

新增分組并新增菜單

//插入自定義菜單
this.$refs.designer.addMenu({
	title: "自定義組件",
    name: "custom",
    list: [{
            icon: 'icon-checkbox',
        	name: 'checkbox',
        	label: '單選框'
    }]
});

上面代碼新建了一個(gè)自定義組件的分組，并且在這個(gè)分組中新增了一個(gè)單選框的菜單。如果這里我們新增的菜單關(guān)聯(lián)的是一個(gè)自定義組件，那么我們需要先插入組件生成規(guī)則，否則只是新增了按鈕，拖拽無效。修改上述代碼如下：

//插入自定義組件signboard的生成規(guī)則(詳細(xì)內(nèi)容下一節(jié)講)
this.$refs.designer.addComponent(signboard);

//插入自定義菜單
this.$refs.designer.addMenu({
	title: "自定義組件",
	name: "custom",
	list: [{
            icon: signboard.icon,
            name: signboard.name,
            label: signboard.label
          }]
		});
});

自定義組件

官方文檔說明：http://designer.form-create.com/guide/component.html

新增Vue自定義組件

這個(gè)內(nèi)容沒什么好說，就跟你平時(shí)開發(fā)Vue自定義組件一樣。新建完成之后，我們需要定義組件的生成規(guī)則，這樣才能在form-create中使用。

自定義組件生成規(guī)則

組件生成規(guī)則是一份js文件，定義了一個(gè)對(duì)象，以及組件生成所需配置的一些屬性，常用的如：type，field，title，props，options等，具體的字段說明參考：http://www.form-create.com/v2/guide/rule.html#%E6%89%A9%E5%B1%95%E9%85%8D%E7%BD%AE
代碼示例：

import SignBoard from "./components/esign/SignBoard.vue";

const label = "電子簽名";
const name = "SignBoard";

function makeRequiredRule() {
  return {
    type: "Required",
    field: "formCreate$required",
    title: "是否必填"
  };
}

export const signboard = {
  //拖拽組件的圖標(biāo)
  icon: "icon-checkbox",
  //拖拽組件的名稱
  label,
  //拖拽組件的 key
  name,
  //拖拽組件的生成規(guī)則
  rule() {
    //如果在 props 方法中需要修改 rule 的屬性,需要提前在 rule 上定義對(duì)應(yīng)的屬性
    return {
      //生成組件的名稱
      type: name,
      field: "signValue", //表單組件的字段名稱，即v-model綁定的值
      title: label,
      component: SignBoard, //掛載自定義組件
      effect: {
        //設(shè)置自定義屬性
        fetch: "",
        required: "請(qǐng)點(diǎn)擊簽名" //必填校驗(yàn)
      },
      //校驗(yàn)規(guī)則
      validate: [{ type: "string", required: true, message: "請(qǐng)點(diǎn)擊簽名" }],
      props: {},
      // options: []
    };
  },
  props() {
    return [
      makeRequiredRule(),
      // makeOptionsRule("options"),
      { type: "switch", field: "disabled", title: "是否禁用" },
      { type: "input", field: "action", title: "上傳的地址(必填)" },
      {
        type: "Struct",
        field: "headers",
        title: "設(shè)置上傳的請(qǐng)求頭部",
        props: { defaultValue: {} }
      }
    ];
  }
};

官方文檔中對(duì)于組件規(guī)則的定義并沒有很詳細(xì)，如果大家遇到不知如何定義的問題，可以參考內(nèi)置組件的規(guī)則的代碼，https://gitee.com/xaboy/form-create-designer/tree/master/src/config/rule
到這里我們已經(jīng)實(shí)現(xiàn)新增一個(gè)菜單，并且可以拖拽到畫布上，且可預(yù)覽了。
效果圖如下：

右側(cè)組件配置的內(nèi)容，對(duì)應(yīng)上述配置文件props的配置內(nèi)容。

form-create展示自定義組件

官方文檔說明：http://www.form-create.com/v2/guide/custom-form-component.html
要生成的自定義組件必須通過vue.component方法掛載到全局,或者通過formCreate.component方法掛載

例如:

formCreate.component('TestComponent',component);

掛載完成之后，我們就可以根據(jù)接口下發(fā)的組件生成規(guī)則來生成自定義組件了。這里的組件生成規(guī)則就是你前面定義的規(guī)則。但這里有個(gè)問題，前面我們?cè)诒韱卧O(shè)計(jì)器里插入組件規(guī)則時(shí)，定義了component,這樣在接口下發(fā)時(shí)也會(huì)下發(fā)這個(gè)字段，這會(huì)導(dǎo)致找不到自定義組件的文件，因?yàn)槟憧赡懿⒉皇窃谕粋€(gè)項(xiàng)目中使用這個(gè)自定義組件的，所以我這里加了一點(diǎn)處理，在下發(fā)組件規(guī)則時(shí)手動(dòng)去掉了component字段。這樣，我們通過先掛載自定義組件，再生成form-create就不會(huì)有問題了。

關(guān)于form-create如何使用自定義組件差不多就這樣了，我在開發(fā)時(shí)也找了好多參考，說的并不清楚，所以羅里吧嗦的把自己的操作過程完整的又給大家描述了一遍。

針對(duì)評(píng)論里面有同學(xué)提到自定義組件掛載之后仍然不顯示的問題，提個(gè)重點(diǎn)注意事項(xiàng)吧。
注意！注意！注意！重要的事說三遍！??！
在自定義組件規(guī)則中我們通過如下代碼掛載了自定義組件：

component: SignBoard, //掛載自定義組件

1、保存組件規(guī)則時(shí)需去掉component屬性，否則根據(jù)規(guī)則動(dòng)態(tài)繪制formcreate表單時(shí)找不到對(duì)應(yīng)路徑的組件會(huì)報(bào)錯(cuò)

if (item.type === "SignBoard") {
	Reflect.deleteProperty(item, "component");
}

2、動(dòng)態(tài)繪制formcreate表單時(shí)應(yīng)提前注入自定義組件，我是在main.js中注入的文章來源地址http://www.zghlxwxcb.cn/news/detail-458813.html

import SignBoard from '@/views/components/esign/SignBoard'
formCreate.component('SignBoard',SignBoard)

到了這里，關(guān)于Vue——formcreate表單設(shè)計(jì)器自定義組件實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！