Description détaillée de l'utilisation de jointjs dans vue

Cette fois, je vais vous apporter des instructions détaillées pour utiliser jointjs dans vue. Quelles sont les précautions pour utiliser jointjs dans vue. Voici des cas pratiques, jetons un coup d'œil.

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

Première exécution de npm install jointjs --save<.> Ajoutez ensuite les deux lignes suivantes au

fichier d'entrée

, le mien est main.js, ou il peut s'agir d'app.js, et utilisez joint.js et jquery comme variables globales

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

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

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 :

NoNoNo. Notez que le rendu est placé dans le

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

cycle de vie créé

D'après le cycle de vie de la vue, le montage p du joint est introuvable. el: $('#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 dont vous avez besoin. pour cliquer dessus. L'affichage n'est pas encore parfait et doit être amélioré (~￣▽￣)~En d'autres termes, le code deviendra comme ceci :

Pour pointer. sortez-le, introduisez-le via npm. Installez simplement jointjs. Il n'est pas nécessaire d'installer lodash, backbone, jquery ou d'importer le fichier joint.css dans la page. L'auteur a déjà présenté joint.js via un script. J'ai essayé plusieurs fois sans succès. J'ai continué à recevoir des erreurs lors de la lecture du fichier joint.js. Si d'autres amis essaient avec succès, n'hésitez pas à partager.

<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 pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes de tests unitaires et E2E avec Angular CLI

Explication détaillée de l'utilisation de calculé et méthodes

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!