Comment utiliser jointjs dans vue-js tutoriel-php.cn

Comment utiliser jointjs dans vue

亚连

Libérer： 2018-05-29 11:10:46

original

1808 Les gens l'ont consulté

Cet article présente principalement la méthode d'utilisation de jointjs dans vue. Je vais maintenant le partager avec vous et vous donner une référence.

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. regardez-le 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 principal. js, ou il peut s'agir de app.js, joint.js et jquery comme variables globales

window.$ = require(&#39;jquery&#39;);
window.joint = require(&#39;jointjs&#39;);

Copier après la connexion

Il convient de noter ici que joint. js s'appuie sur backbone, jquery et lodash. Lors de l'introduction en mode script, vous devez importer ces fichiers un par un, mais pas lorsque vous utilisez le 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 elle 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, entraînant une incapacité à lire ou une erreur de lecture.

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: $(&#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>

Copier après la connexion

NoNoNo. Notez que le rendu est placé dans le cycle de vie créé. Selon le cycle de vie de la vue, il est introuvable. L'el du joint monté 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. , vous devez cliquer pour l'afficher. Il n'est pas encore parfait et doit être amélioré (~￣▽￣)~

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: $(&#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>

Copier après la connexion

Pour souligner, il vous suffit d'installer jointjs lors de son introduction via npm. Il n'est pas nécessaire d'installer lodash, backbone, jquery ou 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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.