vue+Jointjsの使い方チュートリアル

今回は vue+Jointjs チュートリアルをお届けします。vue+Jointjs チュートリアルを使用する際の注意点は何ですか?実際の事例を見てみましょう。

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

この記事を読んだ後、少なくとも詳細を見てみましょう:

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

次に、次の 2 行をエントリ ファイルに追加します。私の場合は main.js ですが、app.js の場合もあります。そして、joint.js と jquery をグローバル変数として使用します

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

ここで注意すべき点は、joint.js はバックボーン、jquery、lodash に依存しており、スクリプト経由で導入する場合は、これらのファイルを 1 つずつインポートする必要がありますが、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 のライフ サイクルに配置されていることに注意してください。vue のライフ サイクルによれば、ジョイントのマウント p の el が見つかりません: $('#myholder')、つまり It です。私の解決策は、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>

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

推奨読書:

Angular CLI がルートを生成する方法

Angular CLI がブループリントを使用してコードを生成する方法

以上がvue+Jointjsの使い方チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。