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

一、技術(shù)原理

1.1 布局

??目前僅實現(xiàn)了基于vue-grid-layout的網(wǎng)格布局，設(shè)計畫布上的每個組件動態(tài)加載至對應(yīng)的GridItem內(nèi)，同時根據(jù)組件配置綁定相應(yīng)的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>
        <!-- 動態(tài)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 組件

??每個組件的配置抽象為以下示例的接口，用于描述組件的屬性及相關(guān)的布局位置信息，注意分為設(shè)計時與運行時屬性，運行時屬性僅在預(yù)覽與運行時動態(tài)生成。

//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;
    /** 設(shè)計時事件定義 eg: {click: {IVueEventAction}} */
    e?: object;
    /** 運行時生成的事件處理器，用于v-on綁定 eg: {click: function(){...}} */
    a?: object;
    /** 運行時動態(tài)加載的Vue組件 */
    c?: any;
}

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

1.3 狀態(tài)

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

/** 設(shè)計時的視圖狀態(tài)項 */
export interface IVueState {
    Name: string;
    Type: string;
    /**設(shè)置狀態(tài)值的操作，eg: 調(diào)用服務(wù)后設(shè)置狀態(tài)值 */
    Value: IVueEventAction;
}

1.4 事件

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

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

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

export interface IVueLoadDataAction extends IVueEventAction {
    /** 狀態(tài)目標 eg: State = LoadService() */
    State: string;
    Service: string;    //后端服務(wù): 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,                //默認網(wǎng)格寬度
  "Height": 6,                //默認網(wǎng)格高度
  "Props": [                  //組件的props
    {
      "Name": "columns",
      "Type": "array",
      "Default": [],
      "Editor": "sys.ExTableColumnEditor" //指向自定義屬性編輯器
    },
    {
      "Name": "rows",
      "Type": "array",
      "Default": []
    }
  ]
}

二、效果演示

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

??設(shè)計界面的功能區(qū)如下圖所示:

具體操作演示請看短視頻

三、本篇小結(jié)

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