So verwenden Sie JointJS-Attribute in Vue

Dieses Mal zeige ich Ihnen, wie Sie das JointJS-Attribut in Vue verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung des JointJS-Attributs in Vue?

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 stack verwiesenoverflowKlicken 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 wir uns das genauer an:

Führen Sie zuerst npm install jointjs --save

im Vue-Projekt aus und dann in der Eintragsdatei ist main.js, oder es kann app.js sein. Fügen Sie die folgenden zwei Zeilen hinzu und verwenden Sie joint.js und jquery als globale Variablen

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

Hier ist zu beachten, dass joint.js auf Backbone, jquery und lodash basiert Wenn Sie sie über ein Skript einführen, müssen Sie sie einzeln einführen, bei der Übergabe von npm ist dies jedoch nicht erforderlich.

Es reicht nicht aus, es auf diese Weise einzuführen. Möglicherweise tritt das Problem auf, dass das Bild normal geladen, aber nicht per Drag & Drop verschoben werden kann joint.js und die Umgebung in Ihrem eigenen Vue-Projekt, was zu einem Fehler beim Lesen oder Lesen 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: $('#myholder'),
        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: 'blue' }, text: { text: 'my box', fill: 'white' } }
      });
      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 im erstellten Lebenszyklus platziert ist. Gemäß dem Lebenszyklus von vue kann das el des Montage-P nicht gefunden werden: $ ('#myholder'), das heißt, beim Ausführen wird ein Fehler gemeldet. Meine Lösung besteht darin, auf p zu klicken, den Inhalt von joint aus der erstellten Datei zu entfernen und ihn in Methoden einzufügen angezeigt werden kann, ist es noch nicht perfekt und muss verbessert werden (~￣▽￣)~

Mit anderen Worten, der Code sieht so aus:

<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: $('#myholder'),
        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: 'blue' }, text: { text: 'my box', fill: 'white' } }
      });
      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, Installieren Sie einfach jointjs, wenn es über npm eingeführt wird. Ja, 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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Angular CLI-Blueprint-Generierungscode

Der Unterschied zwischen berechneten und Methoden in Vue

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