Comment utiliser les attributs jointjs dans vue

Cette fois, je vais vous montrer comment utiliser les attributs jointjs dans Vue. Quelles sont les précautions pour utiliser les attributs jointjs dans Vue. Voici des cas pratiques, jetons un coup d'œil.

Concernant le problème de l'introduction de joint.js dans vue, j'ai déjà beaucoup cherché sur Internet, mais aucune réponse définitive n'a été donnée. Après deux jours de bricolage, j'ai finalement compris et fait un enregistrement.
Tout d'abord, j'ai fait référence à un article de stackoverflowCliquez-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 . Regardons de plus près. Voici un aperçu :

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

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

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

Il convient de noter ici que joint.js dépend du backbone, jquery et lodash. Lors de leur introduction via un script, ils doivent être introduits un par un. Ces fichiers sont importés, mais ils ne sont pas requis lors de l'utilisation du 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. Notez que le rendu est placé dans le cycle de vie créé Selon 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 :

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

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.

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 :

Code de génération de plan CLI angulaire

La différence entre les calculs et les méthodes dans Vue

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!