前言

在眾多開發(fā)技術(shù)中，Vue組件化開發(fā)技術(shù)以其卓越的靈活性和高效性備受矚目。

低代碼平臺(tái)相信不少人知道它的存在，而且現(xiàn)在大部分公司都在開發(fā)自己的低代碼平臺(tái)，首先我們來看看低代碼平臺(tái)可視化界面：

官網(wǎng)：https://www.jnpfsoft.com/?csdn，感興趣自行去體驗(yàn)。

可以看到，大多數(shù)的頁面設(shè)計(jì)器都包含了幾個(gè)區(qū)域：左邊是組件、中間為畫布、右邊為屬性配置區(qū)域。接下來我們分析它是怎么實(shí)現(xiàn)拖動(dòng)形成一個(gè)表單頁面的，這里我們對(duì)css布局不做研究，直接分析它是怎么實(shí)現(xiàn)的。

一、分析

首先大家來思考一下，我們從左側(cè)組件列表中拖動(dòng)一個(gè)想要的組件到中間畫布上，然后形成我們預(yù)期的頁面，并且點(diǎn)擊畫布上的某個(gè)組件時(shí)會(huì)有當(dāng)前組件的屬性配置區(qū)（每個(gè)組件都有唯一的屬性區(qū)），并且在右側(cè)修改屬性值，頁面也會(huì)接著變化。這到底時(shí)怎么實(shí)現(xiàn)的呢?

其實(shí)這里可以通過json來實(shí)現(xiàn)的，我們預(yù)先定義好描述組件的json，json包含了當(dāng)前組件數(shù)據(jù)和當(dāng)前組件的樣式屬性數(shù)據(jù)等，并通過組件生成器將將描述組件的json結(jié)合起來渲染出實(shí)際組件，當(dāng)修改樣式屬性時(shí)，組件樣式同步更新；下面我們一input組件為例，其大致json如下：

json:{
  fieldId: '',
  name: 'Input',
  label: '單行文本',
  icon:"input01"
  placeholder: '請(qǐng)輸入',
  value: '',
  rules: {},
  makeStyle: { //制作表單的時(shí)候，頁面的樣式控制
    active: false
  },
  style: {}, // 組件的樣式
  setting: {}, // 組件的其他屬性設(shè)置，比如：rows: 2
}

知道了組件需要用json描述，接下來我就開始正式開發(fā)；

二、組件列表

左側(cè)組件列表比較簡單就是將所有組件的json放到一個(gè)數(shù)組中，在頁面中進(jìn)行遍歷即可。

//components  組件列表
 <div
      v-for="(item, index) in components"
      :key="index"
    >
      <i class="iconfont" :class="item.icon"></i>//圖標(biāo)
      <span>{{ item.label }}</span>//列表顯示的名字
    </div>

三、開發(fā)拖拽搭建面板

拖拽組件這里我們借助vuedraggable插件，相關(guān)API請(qǐng)自行查看官網(wǎng)文檔了解，這里不再闡述。

組件區(qū)域

  <!--組件列表改進(jìn)，外層包裹draggable標(biāo)簽 -->
  <draggable
    v-model="components"          // 拖拽列表數(shù)據(jù)源
    :options="{ 
      group:{ 
              name: 'itxst',   // 可拖拽列組，相同表名可相互推拽
              pull: 'clone'    // 拖拽模板物料，復(fù)制到目標(biāo)列表
            }, 
            sort: false        // 是否可推拽排序
    }"  
    :clone="handleClone"       // 復(fù)制模板物料執(zhí)行方法 ，比如克隆元素并產(chǎn)生全局唯一的fieldId
    animation="300"            // 動(dòng)畫延遲
  >
    <div
      v-for="(item, index) in components"
      :key="index"
    >
      <i class="iconfont" :class="item.icon"></i>
      <span>{{ item.label }}</span>
    </div>
  </draggable>


  //克隆的方法
  handleClone(obj) {
      const newObj = Object.assign(_.cloneDeep(obj), {
        fieldId: `${obj.name}_${new Date().getTime()}`,
      })
      return newObj
  }

頁面

  <!-- 畫布區(qū)域 -->
  <draggable
    v-model="list2"         // 拖拽列表數(shù)據(jù)源
    group="itxst"           // 可拖拽列組，相同表名可相互推拽
    ghostClass="ghost"      // 拖動(dòng)元素的占位樣式class
    chosenClass="chosen"    // 選中目標(biāo)的樣式class
    selector="selector"
    :animation="500"        // 動(dòng)畫延遲
    :sort="true"            // 是否可推拽排序
  >
    <component
      v-for="item in mList"
      :key="item.id"
      :is="item.name"
      v-bind="item"
    ></component>
  </draggable>

list2是我們畫布中的組件json組成的數(shù)組,這里使用<component>標(biāo)簽來渲染對(duì)應(yīng)的組件,接下來就是屬性配置區(qū)域；

四、屬性配置區(qū)域

屬性配置區(qū)域其實(shí)也是根據(jù)不同的組件顯示不同的配置組件，它其實(shí)就是一個(gè)組件。當(dāng)我們點(diǎn)擊畫布區(qū)域的某個(gè)組件的時(shí)候配置區(qū)域就會(huì)顯示它的屬性和值，當(dāng)我們修改值以后，頁面也會(huì)隨之變化。

五、組件刪除和復(fù)制

其實(shí)的組件的刪除很簡單，還記得之前的拖動(dòng)形成的唯一的fieldId，點(diǎn)擊刪除就是拿到fieldId在組件數(shù)組中是刪除數(shù)組中對(duì)應(yīng)的組件json即可。同理復(fù)制的時(shí)候也是在當(dāng)前fieldId對(duì)應(yīng)的組件后面插入一條數(shù)據(jù)，指得注意的是，復(fù)制也要生成唯一的fieldId；

六、后記

到這里基本拖拽實(shí)現(xiàn)了，認(rèn)真想想，其實(shí)低代碼平臺(tái)萬變不離其宗，都是圍繞json來進(jìn)行的，后續(xù)將出嵌套組件是如何實(shí)現(xiàn)，還有組件間通訊方式專題，代碼將會(huì)開源，我將會(huì)出個(gè)簡單的demo方便大家對(duì)照著文章的思路，自己琢磨；

帶你從零實(shí)現(xiàn)vue 低代碼平臺(tái) - 知乎 (zhihu.com)文章來源地址http://www.zghlxwxcb.cn/news/detail-585972.html