前言
前一陣子拜訪了一些小伙伴，大家都表示苦前端太久了，需要花費(fèi)不少時(shí)間在前端開(kāi)發(fā)上。本著在不損失靈活性的前提下盡可能提高開(kāi)發(fā)效率的原則，作者嘗試在框架內(nèi)集成了拖拽方式生成Vue用戶界面的功能作為補(bǔ)充，以方便快速生成增刪改查界面，也可以用于大屏展示及簡(jiǎn)單的網(wǎng)頁(yè)制作。
一、技術(shù)原理
1.1 布局
目前僅實(shí)現(xiàn)了基于vue-grid-layout的網(wǎng)格布局，設(shè)計(jì)畫(huà)布上的每個(gè)組件動(dòng)態(tài)加載至對(duì)應(yīng)的GridItem內(nèi)，同時(shí)根據(jù)組件配置綁定相應(yīng)的prop及事件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!--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> <!-- 動(dòng)態(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 組件
每個(gè)組件的配置抽象為以下示例的接口，用于描述組件的屬性及相關(guān)的布局位置信息，注意分為設(shè)計(jì)時(shí)與運(yùn)行時(shí)屬性，運(yùn)行時(shí)屬性僅在預(yù)覽與運(yùn)行時(shí)動(dòng)態(tài)生成。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
//src/runtime/IVueVisual.tsexport 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è)計(jì)時(shí)事件定義 eg: {click: {IVueEventAction}} */ e?: object; /** 運(yùn)行時(shí)生成的事件處理器，用于v-on綁定 eg: {click: function(){...}} */ a?: object; /** 運(yùn)行時(shí)動(dòng)態(tài)加載的Vue組件 */ c?: any;}/** 基于Grid的布局項(xiàng) */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ù)，所以每個(gè)視圖模型都有對(duì)應(yīng)的狀態(tài)設(shè)置（即Vue的data)，描述狀態(tài)的名稱、類型及相應(yīng)的設(shè)置值的操作，視圖的狀態(tài)在運(yùn)行時(shí)會(huì)根據(jù)設(shè)置從后端加載數(shù)據(jù)或置為默認(rèn)值。
|
1
2
3
4
5
6
7
|
/** 設(shè)計(jì)時(shí)的視圖狀態(tài)項(xiàng) */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)兩類，分別對(duì)應(yīng)于從后端讀數(shù)據(jù)至當(dāng)前狀態(tài)與遞交當(dāng)前狀態(tài)數(shù)據(jù)至后端處理。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
export type EventAction = 'LoadData' | 'PostData' | 'RunScript';export interface IVueEventAction { /** 操作類型, eg: LoadData */ readonly Type: EventAction;}export interface IVueLoadDataAction extends IVueEventAction { /** 狀態(tài)目標(biāo) eg: State = LoadService() */ State: string; Service: string; //后端服務(wù): eg: sys.OrderService.listAll ServiceArgs: any[]; //eg: [{Name:'arg1', Type:'string', Value:'"rick"'}], Value為表達(dá)式} |
1.5 工具箱
可供拖放至畫(huà)布的組件由全局配置"VueWidgets"定義，分為全局注冊(cè)的組件及自定義組件，自定義組件可以是代碼方式的視圖模型，也可以是可視化方式的視圖模型。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//自定義Widget配置定義{ "Name": "Table", //組件名稱 "Component": "sys.ExTable", //指向自定義視圖模型或全局組件名稱(eg: ElInput) "Icon": "fa fa-table", //工具箱圖標(biāo) "Width": 12, //默認(rèn)網(wǎng)格寬度 "Height": 6, //默認(rèn)網(wǎng)格高度 "Props": [ //組件的props { "Name": "columns", "Type": "array", "Default": [], "Editor": "sys.ExTableColumnEditor" //指向自定義屬性編輯器 }, { "Name": "rows", "Type": "array", "Default": [] } ]} |
二、效果演示
注意新建視圖模型時(shí)類型選擇：Vue Visual，原來(lái)的代碼方式為Vue Code。
設(shè)計(jì)界面的功能區(qū)如下圖所示:
總結(jié)
到此這篇關(guān)于如何以拖拽方式生成Vue用戶界面的文章就介紹到這了,更多相關(guān)拖拽生成Vue用戶界面內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://www.cnblogs.com/BaiCai/p/14592484.html
