Tutoriel d'utilisation de vue+Jointjs

Cette fois je vais vous proposer un tutoriel vue+Jointjs Quelles sont les précautions d'utilisation du tutoriel vue+Jointjs Ce qui suit est un cas pratique, jetons un oeil.

J'ai beaucoup cherché sur Internet le problème de l'introduction de joint.js dans vue, mais aucune réponse définitive n'a été donnée. Après deux jours de bricolage, j'ai finalement compris et pris une note.
Tout d'abord, j'ai fait référence à un article de stackoverflow, cliquez-moi, cliquez-moi

Après avoir lu cet article, vous devriez au moins avoir une idée générale de ce qu'il faut faire. en détail :

Exécutez d'abord npm install jointjs --save

dans le projet vue, puis ajoutez les deux lignes suivantes au fichier d'entrée, le mien est main.js, ou cela peut être app.js, et utilisez joint.js et jquery comme variables globales

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

Il convient de noter ici que joint.js s'appuie sur backbone, jquery et lodash Lors de son introduction via un script, ces fichiers doivent le faire. être introduit un par un, mais ce n'est pas obligatoire lors de l'utilisation de npm de vue. Le joint.js introduit par npm les a déjà encapsulés par défaut.

Il ne suffit pas de l'introduire de cette manière. Vous pouvez rencontrer le problème que l'image peut être chargée normalement, mais ne peut pas être glissée et déposée. Lorsque vous rencontrez ces problèmes, cela est généralement dû au conflit entre. joint.js et l'environnement dans votre propre projet vue, ce qui entraîne l'impossibilité de lire ou de récupérer une erreur.

J'ai installé element, iview, axios, vuex et jquery dans mon projet d'origine. Après avoir installé joint.js, jointjs n'a pas pu être chargé normalement. Ensuite, j'ai reconstruit un projet et j'ai uniquement installé element, axios et vuex. , afin d'éviter les conflits entre jquery et jquery dans joint.js, jquery n'a pas été installé ultérieurement.

Est-ce que ça va ? Puis-je exécuter l'exemple dans le lien ci-dessus ? Comme ceci :

<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, remarquez que le rendu est placé dans le cycle de vie de créé. Selon le cycle de vie de la vue, il est impossible de trouver l'el de montage du joint p : $('. # myholder'), c'est-à-dire qu'une erreur sera signalée lors de l'exécution. Ma solution est de cliquer sur p, de retirer le contenu du joint créé et de le mettre dans les méthodes. peut être affiché. Ce n'est pas trop mal. Parfait, en attente d'amélioration (~￣▽￣)~

En d'autres termes, le code deviendra comme ceci :

<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>

Je crois. vous maîtrisez la méthode après avoir lu le cas dans cet article, plus Veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment Angular CLI génère des routes

Comment Angular CLI utilise des plans pour générer du code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!