topology vue demo

トポロジーデモ

トポロジー + elemenu-ui + vue-cli に基づくトポロジー エディター (学習参照のみ)

現時点では、この機能は非常にシンプルで、Vue で作成されたトポロジに関するいくつかのデモを参照し、それらを統合して、使い慣れたものに変更しました。 トポロジ上の API 実装の維持と追加を継続します

テクノロジーの選択

• Vue-Cli
• トポロジー
• 要素-ui

アイデア

大枠は他の比較的よくできたデモをベースにしており、コンポーネントごとに開発しやすいようにレイアウトに従ってコンポーネントを分割しています。主にキャンバスオブジェクトを操作したり、キャンバスを各コンポーネントに渡してコンポーネントが単体で動作したり（同じアプリケーションアドレスのオブジェクトを操作する原理）、親コンポーネントのメソッドをコールバックするためにエミットしたりします。公式の Le5le サンプルは Nuxt で書かれており、Vuex を使用して親コンポーネントにどのメソッドを呼び出すかを通知します。ここでは vuex を導入したくないので、削除して現在のものに置き換えました。今のところ問題は発生していませんが、より良い方法があれば、ご教示ください。

使用法

プロジェクト運営

 npm i
npm run serve

プロジェクトのビルド

 npm run build

ファイルのリントと修正

 npm run lint

よくある質問

App.vue の下にpadding: 50px があるのはなぜですか

これは、左側のコンポーネントをキャンバスにドラッグすると、ページが特定の位置に戻ってしまうトポロジのバグをテストするためです。 これをコンポーネントとしてプロジェクトに組み込む場合、必ずしも別個のインターフェイスである必要はなく、ダイアログまたはコンテナーにラップされたコンポーネントとして使用される可能性があるため、このバグは依然としてある程度の影響を及ぼします。通常の状況では削除できます

スクリーンショットを実行する