Tutorial zur Verwendung von vue+Jointjs

Dieses Mal bringe ich Ihnen ein vue+Jointjs-Tutorial. Was sind die Vorsichtsmaßnahmen für die Verwendung des vue+Jointjs-Tutorials?

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 Im Detail:

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 vielleicht auch app.js und verwenden Sie joint.js und jquery als globale Variable

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

Hierbei ist zu beachten, dass joint.js auf Backbone, jquery und lodash angewiesen ist. Bei der Einführung über ein Skript müssen diese Dateien importiert werden Eins nach dem anderen, aber es ist nicht erforderlich, wenn npm von vue verwendet wird. npm imports joint.js hat 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, aber nicht per Drag-and-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 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 in den Lebenszyklus von Vue eingefügt wird. Gemäß dem Lebenszyklus von Vue ist es unmöglich, den El des Joints zu finden, der p: $('#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 Es ist noch nicht perfekt (~￣▽￣)~

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>

Ich glaube, Sie haben die Methode danach gemeistert Lesen Sie den Fall in diesem Artikel. Weitere spannende Dinge finden Sie unter php Andere verwandte Artikel auf der chinesischen Website!

Empfohlene Lektüre:

Wie Angular CLI Routen generiert

Wie Angular CLI Blaupausen verwendet, um Code zu generieren

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung von vue+Jointjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!