Vue と jsmind を使用してマインド マップにノード リンクと内部ジャンプを実装するにはどうすればよいですか?

Vue と jsmind を使用してマインド マップにノード リンクと内部ジャンプを実装するにはどうすればよいですか?

マインド マッピングは、思考を整理し、思考を表示するのに役立つツールです。最新のアプリケーションでは、Vue.js ライブラリと jsmind ライブラリを使用してインタラクティブなマインド マップを作成できます。この記事では、Vue と jsmind を使用してマインド マップにノード リンクと内部ジャンプを実装する方法を紹介します。

まず、Vue ライブラリと jsmind ライブラリをインストールする必要があります。これらのライブラリは、npm または CDN を通じて入手できます。 Vue プロジェクトでは、package.json ファイルに次の依存関係を追加できます。

{
  "dependencies": {
    "vue": "^2.6.11",
    "jsmind": "^1.0.3"
  }
}

次に、マインド マップをホストする Vue コンポーネントを作成できます。テンプレートでは、<div> 要素を使用して jsmind の DOM 要素をラップできます。 Vue の <code>mounted() ライフサイクル フックでは、マインド マップを初期化し、ノードをレンダリングできます。以下は簡単な Vue コンポーネントの例です。

<template>
  <div>
    <div ref="jsMindContainer"></div>
  </div>
</template>

<script>
import { jm } from 'jsmind'
import 'jsmind/style/jsmind.css'

export default {
  mounted() {
    const mind = {}
    const options = {
      container: 'jsMindContainer',
      theme: 'default'
    }
    const jmInstance = jm.init(options)
    jmInstance.show(mind)
  }
}
</script>

コードでは、まず jm オブジェクトを jsmind ライブラリからインポートし、それをコンポーネントの ## にマウントします。 #mounted( )このオブジェクトをメソッドで使用して、マインド マップを初期化します。また、マインド マップ コンテナの名前を options オブジェクトで jsMindContainer として指定しました。 Vue テンプレートでは、

要素内に ref 属性を指定して、このコンテナを参照します。 これで、空のマインド マップをレンダリングできます。次に、マインド マップにノード リンクと内部ジャンプを実装する方法を示します。

まず、マインド マップのデータ構造にリンク属性を追加する必要があります。各ノード オブジェクトに、ノードのリンク アドレスを表す

url 属性を追加できます。例:

const mind = {
  "meta": {
    "name": "思维导图",
    "author": "你的名字"
  },
  "format": "node_array",
  "data": [
    { "id": "root", "isroot": true, "topic": "根节点" },
    { "id": "node1", "parentid": "root", "topic": "节点1", "url": "http://example.com" },
    { "id": "node2", "parentid": "root", "topic": "节点2", "url": "" },
    { "id": "node3", "parentid": "root", "topic": "节点3", "url": "" }
  ]
}

上記のコードでは、

data 配列の各ノード オブジェクトに url 属性を追加しました。この属性には、ノードのリンク アドレスを格納できます。ノード 1 のリンク アドレスは http://example.com ですが、ノード 2 と 3 にはリンク アドレスがありません。

次に、マインド マップによってレンダリングされたノード テンプレートへのリンクを追加する必要があります。 jsmind の

show メソッドの 2 番目のパラメーターを使用して、ノードをカスタマイズできます。 Vue の v-html ディレクティブを使用してノードのコンテンツをレンダリングし、リンク属性に基づいて条件付きで タグを追加できます。以下は、変更された Vue コンポーネントのサンプル コードです。

<template>
  <div>
    <div ref="jsMindContainer"></div>
  </div>
</template>

<script>
import { jm } from 'jsmind'
import 'jsmind/style/jsmind.css'

export default {
  mounted() {
    const mind = {
      "meta": {
        "name": "思维导图",
        "author": "你的名字"
      },
      "format": "node_array",
      "data": [
        { "id": "root", "isroot": true, "topic": "根节点" },
        { "id": "node1", "parentid": "root", "topic": "节点1", "url": "http://example.com" },
        { "id": "node2", "parentid": "root", "topic": "节点2", "url": "" },
        { "id": "node3", "parentid": "root", "topic": "节点3", "url": "" }
      ]
    }
    
    const options = {
      container: 'jsMindContainer',
      theme: 'default'
    }
    
    const jmInstance = jm.init(options)
    
    jmInstance.show(mind, node => {
      const topic = node.topic || ''
      const url = node.data.url || ''
     
      if (url) {
        return `<a href="${url}">${topic}</a>`
      } else {
        return topic
      }
    })
  }
}
</script>

上記のコードでは、

jmInstance.show()## の 2 番目のパラメーターのコールバック関数でノードのリンク属性を使用します。 # メソッド <a></a> タグは条件付きで追加されます。 link 属性が存在する場合、ノード テキストは <a></a> タグで囲まれます。それ以外の場合は、ノード テキストのみが表示されます。 ここで、リンクのあるノードをクリックすると、新しいタブが開き、リンク アドレスにジャンプします。リンクのないノードの場合、クリックしても操作はトリガーされません。

要約すると、Vue と jsmind を使用してマインド マップにノード リンクと内部ジャンプを実装するには、ノードのリンク属性を追加し、リンクに基づいてノード テンプレートに条件付きで

ラベル。上記のサンプル コードは、このタスクを実行するのに役立ちます。この記事があなたのお役に立てば幸いです!