So generieren Sie eine Vue-Benutzeroberfläche per Drag & Drop

Vorwort

Ich habe vor einiger Zeit ein paar Freunde besucht und alle sagten, dass sie zu lange am Front-End gearbeitet hätten und viel Zeit in die Front-End-Entwicklung investieren müssten. Basierend auf dem Prinzip, die Entwicklungseffizienz so weit wie möglich zu verbessern, ohne die Flexibilität zu beeinträchtigen, hat der Autor versucht, die Funktion zum Generieren einer Vue-Benutzeroberfläche durch Ziehen und Ablegen als Ergänzung in das Framework zu integrieren, um die schnelle Generierung von Schnittstellen zum Hinzufügen, Löschen, Ändern und Abfragen zu erleichtern, die auch für die Anzeige auf großen Bildschirmen und die einfache Erstellung von Webseiten verwendet werden können.

1. Technisches Prinzip

1.1 Aufbau

Derzeit ist nur das auf Vue-Grid-Layout basierende Rasterlayout implementiert. Jede Komponente auf der Entwurfsleinwand wird dynamisch in das entsprechende GridItem geladen, und die entsprechenden Requisiten und Ereignisse werden entsprechend der Komponentenkonfiguration gebunden.

<!--src/components/Designers/View/VueVisualDesigner.vue-->
<grid-layout ref="gridLayout" Klasse="editorCanvas" :layout.sync="layout"
        :col-num="layoutOption.colNum" :row-height="layoutOption.rowHeight"
        :is-draggable="!Vorschau" :is-resizable="!Vorschau" @dragover.native="onDragOverGrid">
 <grid-item class="widgetPanel" v-for="Element im Layout" :x="Element.x" :y="Element.y" :w="Element.w"
    :h="Artikel.h" :i="Artikel.i" :Schlüssel="Artikel.i"
    @resize="beiItemResize(Artikel)" @container-resized="beiItemResize(Artikel)">
  <div v-if="!Vorschau" Klasse="widgetOverlay" @click="onSelectWidget(item)"></div>
  <!-- Dynamisches Widget -->
  <Komponente :ref="item.i" :ist="item.c" :stil="makeWidgetStyle(item)"
     v-model="runState[item.m]" v-bind="item.p" v-on="item.a">
   {{ item.t }}
  </Komponente>
 </Rasterelement>
</Rasterlayout>

1.2 Komponenten

Die Konfiguration jeder Komponente wird in die im folgenden Beispiel gezeigte Schnittstelle abstrahiert, die zur Beschreibung der Eigenschaften der Komponente und zugehöriger Layoutpositionsinformationen verwendet wird. Beachten Sie, dass sie in Entwurfszeit- und Laufzeiteigenschaften unterteilt ist. Die Laufzeiteigenschaften werden nur während der Vorschau und Laufzeit dynamisch generiert.

//src/runtime/IVueVisual.ts
Exportschnittstelle IVueLayoutItem {
 /** Komponentenname zB: Input */
 n: Zeichenfolge;
 /** v-text */
 t?: Zeichenfolge;
 /** v-Modell */
 m?: Zeichenfolge;
 /** Komponenteneigenschaften, zB: {size: 'mini'} */
 p: Objekt;
 /** Komponentengebundene Props zB: {data:':data'} */
 b?: Objekt;
 /** Entwurfszeit-Ereignisdefinition, zB: {click: {IVueEventAction}} */
 e?: Objekt;
 /** Zur Laufzeit generierter Eventhandler, der für die v-on-Bindung verwendet wird, zB: {click: function(){...}} */
 ein?: Objekt;
 /**Vue-Komponenten werden zur Laufzeit dynamisch geladen*/
 c?: beliebig;
}

/** Rasterbasierte Layoutelemente*/
Exportschnittstelle IVueGridLayoutItem erweitert IVueLayoutItem {
 i: Zeichenfolge;
 x: Zahl;
 y: Zahl;
 w: Zahl;
 h: Zahl;
}

1.3 Stand

Komponenten und Layouts allein können nur auf der Schnittstelle dargestellt werden, und Geschäftsdaten müssen auch gebunden werden. Daher verfügt jedes Ansichtsmodell über eine entsprechende Statuseinstellung (d. h. Vue-Daten), die den Statusnamen, den Typ und die entsprechenden Einstellungswertoperationen beschreibt. Der Status der Ansicht lädt Daten vom Backend oder setzt sie gemäß den Einstellungen zur Laufzeit auf den Standardwert.

/** Entwurfszeit-Ansichtsstatuselemente */
Schnittstelle IVueState exportieren {
 Name: Zeichenfolge;
 Typ: Zeichenfolge;
 /**Operation zum Setzen des Statuswertes, zB: Setzen des Statuswertes nach dem Aufruf des Dienstes*/
 Wert: IVueEventAction;
}

1.4 Veranstaltungen

Einige Komponenten wie Schaltflächen können an die entsprechende Ereignisverarbeitung gebunden werden. Derzeit wird die Ereignisverarbeitung hauptsächlich in zwei Kategorien unterteilt: Laden von Daten (LoadData) und Senden von Daten (PostData), was dem Lesen von Daten aus dem Backend in den aktuellen Status und dem Senden der aktuellen Statusdaten an das Backend zur Verarbeitung entspricht.

Exporttyp EventAction = „LoadData“ | „PostData“ | „RunScript“;

Schnittstelle IVueEventAction exportieren {
 /** Operationstyp, zB: LoadData */
 schreibgeschützter Typ: EventAction;
}

Exportschnittstelle IVueLoadDataAction erweitert IVueEventAction {
 /** Zielstatus, z. B.: State = LoadService() */
 Status: Zeichenfolge;
 Service: string; //Backend-Dienst: zB: sys.OrderService.listAll
 ServiceArgs: any[]; //zB: [{Name:'arg1', Type:'string', Value:'"rick"'}], Wert ist ein Ausdruck}

1.5 Werkzeugkasten

Die Komponenten, die per Drag & Drop auf die Leinwand gezogen werden können, werden durch die globale Konfiguration „VueWidgets“ definiert, die in global registrierte Komponenten und benutzerdefinierte Komponenten unterteilt sind. Benutzerdefinierte Komponenten können Ansichtsmodelle im Code oder in visueller Form sein.

//Benutzerdefinierte Widget-Konfigurationsdefinition {
 "Name": "Table", //Komponentenname "Component": "sys.ExTable", //Zeigt auf ein benutzerdefiniertes Ansichtsmodell oder einen globalen Komponentennamen (z. B.: ElInput)
 "Icon": "fa fa-table", //Toolbox-Symbol "Width": 12, //Standardrasterbreite "Height": 6, //Standardrasterhöhe "Props": [ //Komponenten-Props
 {
  "Name": "Spalten",
  "Typ": "Array",
  "Standard": [],
  "Editor": "sys.ExTableColumnEditor" //zeigt auf den benutzerdefinierten Attribut-Editor},
 {
  "Name": "Zeilen",
  "Typ": "Array",
  "Standard": []
 }
 ]
}

2. Effektdemonstration

Beachten Sie, dass beim Erstellen eines neuen Ansichtsmodells die Typauswahl lautet: Vue Visual und die ursprüngliche Codemethode Vue Code ist.

Der Funktionsbereich der Entwurfsoberfläche ist in der folgenden Abbildung dargestellt:

Bitte schauen Sie sich das kurze Video mit einer spezifischen Funktionsdemonstration an.

Zusammenfassen

Dies ist das Ende dieses Artikels zum Generieren einer Vue-Benutzeroberfläche durch Ziehen und Ablegen. Weitere relevante Inhalte zum Generieren einer Vue-Benutzeroberfläche durch Ziehen und Ablegen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!