form-generator是什么？

form-generator的作者是這樣介紹的：Element UI表單設(shè)計(jì)及代碼生成器，可將生成的代碼直接運(yùn)行在基于Element的vue項(xiàng)目中；也可導(dǎo)出JSON表單，使用配套的解析器將JSON解析成真實(shí)的表單。

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

form-generator的實(shí)現(xiàn)

布局

• 左側(cè)：供拖拽的組件
• 中間：組件單個(gè)及組合預(yù)覽效果
• 右側(cè)：組件及表達(dá)的配置項(xiàng)

實(shí)現(xiàn)

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

那請(qǐng)問(wèn)什么樣的數(shù)據(jù)格式是vue render可以識(shí)別的？

這個(gè)時(shí)候你就要了解下vue的render方法了~

render函數(shù)講解

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

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

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

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

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

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

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

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

如何自定義組件

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

代碼

//第一步：在/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里面寫(xiě)自己的組件 
//如：/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里面寫(xiě)上想要配置的屬性值
<el-form-item v-if="activeData.__config__.tag === 'customButton'" label="按鈕標(biāo)題">
     <el-input v-model="activeData.dataName" placeholder="請(qǐng)輸入按鈕標(biāo)題" @input="changeRenderKey"
     />
</el-form-item>

注意：這里的__config__.tag一定要唯一，和json里面的tag對(duì)應(yīng)，來(lái)定義當(dāng)前組件的配置項(xiàng)。

問(wèn)題點(diǎn)：

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

其實(shí)是RightPanel這個(gè)文件里面，配置了許多默認(rèn)展示的屬性值，大家可以看看文件看代碼里面沒(méi)有幾個(gè)自定義的組件，那其他組件都是怎么來(lái)的呢？

大家可以看下這個(gè)文件，里面會(huì)有一些其他組件的代碼

以上是我對(duì)form-generator的一點(diǎn)了解，希望對(duì)和我遇到類(lèi)似需求的你有一點(diǎn)點(diǎn)幫助，同時(shí)也期待大家的指點(diǎn)。

總結(jié)

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

最新評(píng)論