vueでjointjs属性を使用する方法

今回は、Vue で Jointjs 属性を使用する方法を説明します。Vue で Jointjs 属性を使用する際の 注意事項 は何ですか? 以下は実際的なケースです。

joint.js を vue に導入する問題についてインターネットでたくさん検索しましたが、誰も明確な答えを与えてくれませんでした。2 日間いじくり回した後、ようやく理解したのでメモします。

まず最初に、stack
overflowの記事を参照しましたClick me click me

この記事を読んだら、少なくともその方法を大まかに理解できるはずです。詳しく見てみましょう:

最初に実行します。 vue プロジェクト npm install Jointjs --save

次に、次の 2 行を

entry ファイル に追加します。私の場合は main.js または app.js で、joint.js と jquery をグローバル変数として使用します。

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

ここで注意すべき点 そう、joint.jsはbackbone、jquery、lodashに依存しますが、スクリプト経由で導入する場合はこれらのファイルをいちいちインポートする必要がありますが、vueのnpmを使用する場合は必要ありません。 npm によって導入された Joint.js は、デフォルトでこれらのファイルをすでにカプセル化しています。

この方法で導入するだけでは十分ではなく、画像は正常にロードできるが、ドラッグ アンド ドロップができないという問題が発生する可能性があります。これらの問題が発生した場合、通常、joint.js と環境の間の競合が原因です。独自の Vue プロジェクト内で実行すると、読み取れなくなったり、読み間違いが発生したりします。

元のプロジェクトにelement、iview、axios、vuex、jqueryをインストールしましたが、joint.jsをインストールした後、jointjsが正常に読み込めなくなり、後でelement、axios、vuexのみをインストールしました。 jqueryを回避するにはjoint.jsのjqueryと競合してしまい、後からjqueryをインストールしませんでした。

これでいいですか？上のリンクの例を実行できますか?次のように:

<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、レンダリングが created の

lifecycle に配置されていることに注意してください。vue のライフサイクルによれば、ジョイントのマウント p の el が見つかりません: $('#myholder'), In otherつまり、実行時にエラーが報告されます。私の解決策は、p をクリックして、作成されたジョイントのコンテンツを取り出し、それを表示する前にクリックする必要があります。改善を待ちます(~￣▽￣)~

つまり、コードは次のようになります:

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

ちなみに、npm導入により、jointjsをインストールするだけです。 lodash、backbone、jquery、または Joint.css ファイルをページにインストールする必要があります。著者は以前、joint.js をスクリプトで導入しましたが、何度も試みましたが成功しませんでした。joint.js ファイルの読み込みに成功した場合は、お気軽に共有してください。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Angular CLI ブループリント生成コード

Vue の計算とメソッドの違い

以上がvueでjointjs属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。