快捷導(dǎo)航

如何以拖拽方式生成Vue用戶界面

更新時(shí)間：2021年04月06日 09:40:24 作者：白菜園

這篇文章主要給大家介紹了關(guān)于如何以拖拽方式生成Vue用戶界面的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

一、技術(shù)原理

1.1 布局

目前僅實(shí)現(xiàn)了基于vue-grid-layout的網(wǎng)格布局，設(shè)計(jì)畫布上的每個(gè)組件動(dòng)態(tài)加載至對(duì)應(yīng)的GridItem內(nèi)，同時(shí)根據(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>
  <!-- 動(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)生成。

//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è)計(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)值。

/** 設(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ù)至后端處理。

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 工具箱

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

//自定義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": []
 }
 ]
}