前一陣子拜訪了一些小夥伴，大家都表示苦前端太久了，需要花費不少時間在前端開發上。本著在不損失靈活性的前提下儘可能提高開發效率的原則，作者嘗試在框架內集成了拖拽方式生成Vue使用者介面的功能作為補充，以方便快速生成增刪改查介面，也可以用於大屏展示及簡單的網頁製作。 # 一、技術原理 ## 1.1 佈局   目前僅實現了基於vue-grid-layout的網格佈局，設計畫布上的每個元件動態載入至對應的GridItem內，同時根據元件配置繫結相應的prop及事件。 ```html {{ item.t }} ``` ## 1.2 元件   每個元件的配置抽象為以下示例的介面，用於描述元件的屬性及相關的佈局位置資訊，注意分為設計時與執行時屬性，執行時屬性僅在預覽與執行時動態生成。 ```typescript //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)，描述狀態的名稱、型別及相應的設定值的操作，檢視的狀態在執行時會根據設定從後端載入資料或置為預設值。 ```typescript /** 設計時的檢視狀態項 */ export interface IVueState { Name: string; Type: string; /**設定狀態值的操作，eg: 呼叫服務後設置狀態值 */ Value: IVueEventAction; } ``` ## 1.4 事件   某些如Button類的元件可以繫結相應的事件處理，目前事件處理主要分為載入資料（LoadData)及遞交資料(PostData)兩類，分別對應於從後端讀資料至當前狀態與遞交當前狀態資料至後端處理。 ```typescript 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"定義，分為全域性註冊的元件及自定義元件，自定義元件可以是程式碼方式的檢視模型，也可以是視覺化方式的檢視模型。 ```json //自定義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。    設計介面的功能區如下圖所示:  [具體操作演示請看短視訊](https://www.ixigua.com/6944203626197811719) # 三、本篇小結   作者非專業前端，在這裡只是拋磚引玉，希望感興趣的小夥伴繼續完善，比如自由佈局（絕對定位）、元件動畫等的實現。另邊碼程式碼邊碼文實屬不易，作者需要您的支援請您多多點贊推薦！