So verwenden Sie JointJS in Vue

Dieser Artikel stellt hauptsächlich die Methode zur Verwendung von JointJS in Vue vor. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben.

Bezüglich des Problems der Einführung von joint.js in vue habe ich zuvor viel im Internet gesucht, aber nach zwei Tagen des Bastelns habe ich es endlich herausgefunden und eine Aufzeichnung erstellt.
Zuerst habe ich auf einen Artikel von stackoverflow verwiesen. Klicken Sie auf mich. Klicken Sie auf mich.

Nachdem Sie diesen Artikel gelesen haben, sollten Sie zumindest eine ungefähre Vorstellung davon haben, was zu tun ist Schauen Sie es sich im Detail an:

Führen Sie zuerst npm install jointjs --save

im Vue-Projekt aus und fügen Sie dann die folgenden zwei Zeilen zur Eintragsdatei hinzu, meine ist main. js, oder es kann app.js, joint.js und jquery sein, werden als globale Variablen verwendet

window.$ = require('jquery');
window.joint = require('jointjs');

Hier ist zu beachten, dass joint. js basiert auf Backbone, jquery und lodash. Beim Importieren müssen Sie diese Dateien einzeln importieren, nicht jedoch bei Verwendung von npm von vue. Die von npm eingeführten joint.js haben diese standardmäßig bereits gekapselt.

Es reicht nicht aus, es auf diese Weise einzuführen. Möglicherweise tritt das Problem auf, dass das Bild normal geladen werden kann, es jedoch nicht per Drag & Drop verschoben werden kann zum Konflikt zwischen joint.js und der Umgebung in Ihrem eigenen Vue-Projekt, was zu einer Leseunfähigkeit oder einem Lesefehler führt.

Ich habe element, iview, axios, vuex und jquery in meinem ursprünglichen Projekt installiert. Nach der Installation von joint.js konnte jointjs nicht normal geladen werden. Dann habe ich ein Projekt neu erstellt und nur element, axios und vuex installiert . Um Konflikte zwischen jquery und jquery in joint.js zu vermeiden, wurde jquery später nicht installiert.

Ist das in Ordnung? Kann ich das Beispiel im obigen Link ausführen? So:

<template>
  <p>
    <h1>Home</h1>
    <p id="myholder"></p>
  </p>
</template>

<script>
  export default {
    created() {
      let graph = new joint.dia.Graph;

      let paper = new joint.dia.Paper({
        el: $(&#39;#myholder&#39;),
        width: 600,
        height: 200,
        model: graph,
        gridSize: 1
      });

      let rect = new joint.shapes.basic.Rect({
        position: { x: 100, y: 30 },
        size: { width: 100, height: 30 },
        attrs: { rect: { fill: &#39;blue&#39; }, text: { text: &#39;my box&#39;, fill: &#39;white&#39; } }
      });

      let rect2 = rect.clone();
      rect2.translate(300);

      let link = new joint.dia.Link({
        source: { id: rect.id },
        target: { id: rect2.id }
      });

      graph.addCells([rect, rect2, link]);
    }
  }
</script>

NoNoNo. Beachten Sie, dass das Rendering gemäß dem Vue-Lebenszyklus nicht gefunden werden kann p's el: $('#myholder'), was bedeutet, dass beim Ausführen ein Fehler gemeldet wird, indem ich auf p klicke, den Inhalt von joint aus der erstellten Datei nehme und ihn in Methoden einfüge, um ihn anzuzeigen Es ist noch nicht perfekt und muss verbessert werden (~￣▽￣)~

Mit anderen Worten, der Code wird so aussehen:

<template>
  <p>
    <p id="myholder" @click="click_joint"></p>
  </p>
</template>

<script>
  export default {
   methods:{
     click_joint() {
      let graph = new joint.dia.Graph;

      let paper = new joint.dia.Paper({
        el: $(&#39;#myholder&#39;),
        width: 600,
        height: 200,
        model: graph,
        gridSize: 1
      });

      let rect = new joint.shapes.basic.Rect({
        position: { x: 100, y: 30 },
        size: { width: 100, height: 30 },
        attrs: { rect: { fill: &#39;blue&#39; }, text: { text: &#39;my box&#39;, fill: &#39;white&#39; } }
      });

      let rect2 = rect.clone();
      rect2.translate(300);

      let link = new joint.dia.Link({
        source: { id: rect.id },
        target: { id: rect2.id }
      });

      graph.addCells([rect, rect2, link]);
    }
   }
  }
</script>

Um darauf hinzuweisen, müssen Sie zum Importieren über npm nur jointjs installieren. Es ist nicht erforderlich, lodash, backbone, jquery zu installieren oder die joint.css-Datei in die Seite zu importieren. Der Autor hat es zuvor mehrmals erfolglos versucht. Beim Lesen der Datei joint.js sind immer wieder Fehler aufgetreten. Bitte teilen Sie sie mir mit.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie das Better-Scroll-Plug-in in Angular_AngularJS

Verwenden Sie den Knoten, um Ihren zu erstellen Tutorial zur eigenen Befehlszeilentool-Methode

AngularJS-Implementierung von Kommunikationsmethoden zwischen Controllern, Beispielzusammenfassung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JointJS in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!