form-generator是什么？

form-generator的作者是這樣介紹的：Element UI表單設計及代碼生成器，可將生成的代碼直接運行在基于Element的vue項目中；也可導出JSON表單，使用配套的解析器將JSON解析成真實的表單。

實際用大白話講就是一個基于Element UI組件庫的一個低代碼平臺，通過拖拽的方式，將單個的組件組合成你想要的樣子，最終一鍵生成代碼，可以直接放到你的Vue項目中，提高開發(fā)效率。

form-generator的實現(xiàn)

布局

• 左側(cè)：供拖拽的組件
• 中間：組件單個及組合預覽效果
• 右側(cè)：組件及表達的配置項

實現(xiàn)

• 把組件在config.js配置成json
• 通過拖拽把當前組件的json轉(zhuǎn)化成vue render可以識別的數(shù)據(jù)格式

那請問什么樣的數(shù)據(jù)格式是vue render可以識別的？

這個時候你就要了解下vue的render方法了~

render函數(shù)講解

在使用render函數(shù)中，會使用到一個參數(shù)createElement，而這個createElement參數(shù)，本質(zhì)上，也是一個函數(shù)，是vue中構(gòu)建虛擬dom所使用的工具。下面就圍繞著這個createElement來看一下。

在createelement方法，有三個參數(shù)：

1. 第一個參數(shù)（必要參數(shù)）：主要是用于提供dom中的html內(nèi)容，類型可以是字符串、對象或函數(shù)。

2. 第二個參數(shù)（對象類型，可選）：用于設置這個dom中的一些樣式、屬性、傳的組件的參數(shù)、綁定事件之類的。

3. 第三個參數(shù)（類型是數(shù)組，數(shù)組元素類型是VNode,可選）：主要用于設置分發(fā)的內(nèi)容，如新增的其他組件。

注意：組件樹中的所有vnode必須是唯一的 通過傳入createElement參數(shù)，創(chuàng)建虛擬節(jié)點，然后再將節(jié)點返回給render返回出去。
總的來說，render函數(shù)的本質(zhì)就是創(chuàng)建一個虛擬節(jié)點。

render方法了解的差不多了，那我們看下form-generator里面把json轉(zhuǎn)化后的vnode

到此form-generator大概的實現(xiàn)思路我們知道了，下面我們看下如何自定義組件，在form-generator的基礎(chǔ)上添磚加瓦，實現(xiàn)我們項目的業(yè)務需求~

如何自定義組件

• src\components\generator\config.js 中添加一個json
• src\compontnes\目錄下創(chuàng)建對應的組件
• main.js中全局注冊剛創(chuàng)建的組件
• src\views\index\RightPanel.vue 中綁定第一步中json中添加的各個屬性值

代碼

//第一步：在/form-generator/src/components/generator/config.js里面加入組件json
{
    __config__: {
      label: '自定義按鈕',
      showLabel: false,
      changeTag: true,
      labelWidth: null,
      tag: 'customButton',
      tagIcon: 'button',
      span: 24,
      layout: 'colFormItem',
    },
    __slot__: {
      default: '自定義按鈕111'
    },
    style: {
      width: 'auto',
      height: '35px',
      margin: '20px',
      borderRadius: '30px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      color: '#FFF',
      backgroundColor: '#409EFF',
      borderColor: '#409EFF'
    },
    dataName: '自定義按鈕',
    type: 'primary',
    icon: '',
    round: false,
    size: 'normal',
    site: 'center', // 按鈕位置 左:flex-start 中:cneter 右:flex-end
    plain: false,
    circle: false,
    disabled: false,
    funcType: 'share'
}

//第二步：在components里面寫自己的組件 
//如：/form-generator/src/components/customButton/index.vue

<template>
  <div ref="customButton" class="customButton" @click="handleShare">
    <div v-text="btnText"></div>
  </div>
</template>
    
<script>
export default {
  name: "customButton",
  data() {
    return {};
  },
  computed: {
    btnText() {
      return this.$attrs.dataName;
    },
  },
  methods: {
    handleShare() {
      this.$emit("openShare", "customButton");
    },
  },
};
</script>

//第三步：在/form-generator/src/views/index/main.js里面引入我們的自定義組件
import customButton from '@/components/customButton/index.vue'
Vue.component('customButton', customButton)

//第四步：在/form-generator/src/views/index/RightPanel.vue里面寫上想要配置的屬性值
<el-form-item v-if="activeData.__config__.tag === 'customButton'" label="按鈕標題">
     <el-input v-model="activeData.dataName" placeholder="請輸入按鈕標題" @input="changeRenderKey"
     />
</el-form-item>

注意：這里的__config__.tag一定要唯一，和json里面的tag對應，來定義當前組件的配置項。

問題點：

大家一定很奇怪，這里我明明只配置了一條屬性，為啥會展示這么多？

其實是RightPanel這個文件里面，配置了許多默認展示的屬性值，大家可以看看文件看代碼里面沒有幾個自定義的組件，那其他組件都是怎么來的呢？

大家可以看下這個文件，里面會有一些其他組件的代碼

以上是我對form-generator的一點了解，希望對和我遇到類似需求的你有一點點幫助，同時也期待大家的指點。

總結(jié)

到此這篇關(guān)于前端低代碼form-generator實現(xiàn)及新增自定義組件的文章就介紹到這了,更多相關(guān)前端低代碼form-generator實現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論