vueでjointjsを使う方法

この記事では主にvueでjointjsを使用する方法を紹介しますので、参考にしてください。

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

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

まず、vue プロジェクト Jointjs --save で npm install を実行します

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

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

ここで必須joint.jsはbackbone、jquery、lodashに依存しているので、スクリプト経由で導入する場合はこれらのファイルを一つずつインポートする必要がありますが、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: $(&#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>

NoNoNo、レンダリングが created のライフサイクルに配置されていることに注意してください。vue のライフサイクルによれば、ジョイントのマウント p の el を見つけることは不可能です。 $('#myholder ' )、つまり、実行時にエラーが報告されます。私の解決策は、p をクリックして、作成されたジョイントのコンテンツを取り出し、それをメソッドに入れることです。まだ完璧ではありません、これから改善していきます(￣▽￣)~

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

上記は私があなたのためにまとめたものです。

関連記事:

Angular_AngularJSのベタースクロールプラグインの使い方

nodeを使って独自のコマンドラインツールを作成する方法のチュートリアル

Angularjsの通信方法例まとめコントローラー間

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