How to generate Vue user interface by dragging and dropping

Preface

I visited some friends a while ago, and they all said that they had been working on the front-end for too long and needed to spend a lot of time on front-end development. Based on the principle of improving development efficiency as much as possible without sacrificing flexibility, the author tried to integrate the function of generating Vue user interface by dragging and dropping in the framework as a supplement, so as to facilitate the rapid generation of add, delete, modify and query interface, which can also be used for large-screen display and simple web page production.

1. Technical Principle

1.1 Layout

Currently, only the grid layout based on vue-grid-layout is implemented. Each component on the design canvas is dynamically loaded into the corresponding GridItem, and the corresponding props and events are bound according to the component configuration.

<!--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>
  <!-- Dynamic 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 Components

The configuration of each component is abstracted into the interface shown in the following example, which is used to describe the properties of the component and related layout position information. Note that it is divided into design-time and runtime properties. The runtime properties are only dynamically generated during preview and runtime.

//src/runtime/IVueVisual.ts
export interface IVueLayoutItem {
 /** Component name eg: Input */
 n: string;
 /** v-text */
 t?: string;
 /** v-model */
 m?: string;
 /** Component Props eg: {size: 'mini'} */
 p: object;
 /** Component bound Props eg: {data:':data'} */
 b?: object;
 /** Design-time event definition eg: {click: {IVueEventAction}} */
 e?: object;
 /** Event handler generated at runtime, used for v-on binding eg: {click: function(){...}} */
 a?: object;
 /** Vue components dynamically loaded at runtime*/
 c?: any;
}

/** Grid-based layout items*/
export interface IVueGridLayoutItem extends IVueLayoutItem {
 i: string;
 x: number;
 y: number;
 w: number;
 h: number;
}

1.3 Status

Components and layouts alone can only be presented on the interface, and business data must also be bound. Therefore, each view model has a corresponding state setting (that is, Vue's data), which describes the state name, type, and corresponding setting value operations. The state of the view will load data from the backend or set it to the default value according to the settings at runtime.

/** Design-time view state items */
export interface IVueState {
 Name: string;
 Type: string;
 /**Operation to set the status value, eg: set the status value after calling the service*/
 Value: IVueEventAction;
}

1.4 Events

Some components such as Button can be bound to corresponding event processing. Currently, event processing is mainly divided into two categories: loading data (LoadData) and submitting data (PostData), which correspond to reading data from the backend to the current state and submitting the current state data to the backend for processing.

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

export interface IVueEventAction {
 /** Operation type, eg: LoadData */
 readonly Type: EventAction;
}

export interface IVueLoadDataAction extends IVueEventAction {
 /** State target eg: State = LoadService() */
 State: string;
 Service: string; //Backend service: eg: sys.OrderService.listAll
 ServiceArgs: any[]; //eg: [{Name:'arg1', Type:'string', Value:'"rick"'}], Value is an expression}

1.5 Toolbox

The components that can be dragged and dropped onto the canvas are defined by the global configuration "VueWidgets", which are divided into globally registered components and custom components. Custom components can be view models in code or in visual form.

//Custom Widget configuration definition {
 "Name": "Table", //Component name "Component": "sys.ExTable", //Points to a custom view model or global component name (eg: ElInput)
 "Icon": "fa fa-table", //Toolbox icon "Width": 12, //Default grid width "Height": 6, //Default grid height "Props": [ //Component props
 {
  "Name": "columns",
  "Type": "array",
  "Default": [],
  "Editor": "sys.ExTableColumnEditor" //points to the custom attribute editor},
 {
  "Name": "rows",
  "Type": "array",
  "Default": []
 }
 ]
}

2. Effect Demonstration

Note that when creating a new view model, the type selection is: Vue Visual, and the original code method is Vue Code.

The functional area of ​​the design interface is shown in the figure below:

Please watch the short video for specific operation demonstration

Summarize

This is the end of this article on how to generate a Vue user interface by dragging and dropping. For more relevant content about generating a Vue user interface by dragging and dropping, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!