vue での Jointjs の使用の詳細な説明

今回は、vue での Jointjs の使用方法について詳しく説明します。vue で Jointjs を使用する際の 注意事項 について説明します。実際のケースを見てみましょう。

この記事を読んだ後は、少なくともその方法について大まかなアイデアが得られるはずです。詳しく見てみましょう:

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

次に

エントリに保存します。 file、私のは main .js ですが、app.js に次の 2 行を追加して、joint.js と jquery をグローバル変数として使用することも可能です

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

ここで、joint.js は依存していることに注意してください。 backbone、jquery、lodash をスクリプト経由で導入する場合、これらのファイルは 1 つずつインポートする必要がありますが、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 を使用した単体および E2E テスト手順の詳細な説明

computed メソッドとメソッドの使用方法の詳細な説明

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