前端低代碼form-generator實現及新增自定義組件詳解

更新時間：2023年11月06日 11:20:44 作者：三倆句

這篇文章主要給大家介紹了關于前端低代碼form-generator實現及新增自定義組件的相關資料,form-generator是一個開源的表單生成器,可以幫助我們快速構建各種表單頁面,需要的朋友可以參考下

form-generator是什么？

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

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

form-generator的實現

布局

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

實現

把組件在config.js配置成json
通過拖拽把當前組件的json轉化成vue render可以識別的數據格式

那請問什么樣的數據格式是vue render可以識別的？

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

render函數講解

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

在createelement方法，有三個參數：

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

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

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

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

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

到此form-generator大概的實現思路我們知道了，下面我們看下如何自定義組件，在form-generator的基礎上添磚加瓦，實現我們項目的業(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對應，來定義當前組件的配置項。