拖拽方式生成Vue用戶界面

  前一陣子拜訪了一些小伙伴，大家都表示苦前端太久了，需要花費不少時間在前端開發上。本着在不損失靈活性的前提下盡可能提高開發效率的原則，作者嘗試在框架內集成了拖拽方式生成Vue用戶界面的功能作為補充，以方便快速生成增刪改查界面，也可以用於大屏展示及簡單的網頁制作。

一、技術原理

1.1 布局

  目前僅實現了基於vue-grid-layout的網格布局，設計畫布上的每個組件動態加載至對應的GridItem內，同時根據組件配置綁定相應的prop及事件。

<!--src/components/Designers/View/VueVisualDesigner.vue-->
<grid-layout ref="gridLayout" class="editorCanvas" :layout.sync="layout"
                             :col-num="layoutOption.colNum" :row-height="layoutOption.rowHeight"
                             :is-draggable="!preview" :is-resizable="!preview" @dragover.native="onDragOverGrid">
    <grid-item class="widgetPanel" v-for="item in layout" :x="item.x" :y="item.y" :w="item.w"
               :h="item.h" :i="item.i" :key="item.i"
               @resize="onItemResize(item)" @container-resized="onItemResize(item)">
        <div v-if="!preview" class="widgetOverlay" @click="onSelectWidget(item)"></div>
        <!-- 動態widget -->
        <component :ref="item.i" :is="item.c" :style="makeWidgetStyle(item)"
                   v-model="runState[item.m]" v-bind="item.p" v-on="item.a">
            {{ item.t }}
        </component>
    </grid-item>
</grid-layout>

1.2 組件

  每個組件的配置抽象為以下示例的接口，用於描述組件的屬性及相關的布局位置信息，注意分為設計時與運行時屬性，運行時屬性僅在預覽與運行時動態生成。

//src/runtime/IVueVisual.ts
export interface IVueLayoutItem {
    /** 組件名稱 eg: Input */
    n: string;
    /** v-text */
    t?: string;
    /** v-model */
    m?: string;
    /** 組件Props eg: {size: 'mini'} */
    p: object;
    /** 組件綁定的Props eg: {data:':data'} */
    b?: object;
    /** 設計時事件定義 eg: {click: {IVueEventAction}} */
    e?: object;
    /** 運行時生成的事件處理器，用於v-on綁定 eg: {click: function(){...}} */
    a?: object;
    /** 運行時動態加載的Vue組件 */
    c?: any;
}

/** 基於Grid的布局項 */
export interface IVueGridLayoutItem extends IVueLayoutItem {
    i: string;
    x: number;
    y: number;
    w: number;
    h: number;
}

1.3 狀態

  光有組件及布局只能在界面上呈現，還需要綁定業務數據，所以每個視圖模型都有對應的狀態設置（即Vue的data)，描述狀態的名稱、類型及相應的設置值的操作，視圖的狀態在運行時會根據設置從后端加載數據或置為默認值。

/** 設計時的視圖狀態項 */
export interface IVueState {
    Name: string;
    Type: string;
    /**設置狀態值的操作，eg: 調用服務后設置狀態值 */
    Value: IVueEventAction;
}

1.4 事件

  某些如Button類的組件可以綁定相應的事件處理，目前事件處理主要分為加載數據（LoadData)及遞交數據(PostData)兩類，分別對應於從后端讀數據至當前狀態與遞交當前狀態數據至后端處理。

export type EventAction = 'LoadData' | 'PostData' | 'RunScript';

export interface IVueEventAction {
    /** 操作類型, eg: LoadData */
    readonly Type: EventAction;
}

export interface IVueLoadDataAction extends IVueEventAction {
    /** 狀態目標 eg: State = LoadService() */
    State: string;
    Service: string;    //后端服務: eg: sys.OrderService.listAll
    ServiceArgs: any[]; //eg: [{Name:'arg1', Type:'string', Value:'"rick"'}], Value為表達式
}

1.5 工具箱

  可供拖放至畫布的組件由全局配置"VueWidgets"定義，分為全局注冊的組件及自定義組件，自定義組件可以是代碼方式的視圖模型，也可以是可視化方式的視圖模型。

//自定義Widget配置定義
{
  "Name": "Table",            //組件名稱
  "Component": "sys.ExTable", //指向自定義視圖模型或全局組件名稱(eg: ElInput)
  "Icon": "fa fa-table",      //工具箱圖標
  "Width": 12,                //默認網格寬度
  "Height": 6,                //默認網格高度
  "Props": [                  //組件的props
    {
      "Name": "columns",
      "Type": "array",
      "Default": [],
      "Editor": "sys.ExTableColumnEditor" //指向自定義屬性編輯器
    },
    {
      "Name": "rows",
      "Type": "array",
      "Default": []
    }
  ]
}

二、效果演示

  注意新建視圖模型時類型選擇：Vue Visual，原來的代碼方式為Vue Code。

  設計界面的功能區如下圖所示:

具體操作演示請看短視頻

三、本篇小結

  作者非專業前端，在這里只是拋磚引玉，希望感興趣的小伙伴繼續完善，比如自由布局（絕對定位）、組件動畫等的實現。另邊碼代碼邊碼文實屬不易，作者需要您的支持請您多多點贊推薦！