Vue と jsmind を使用してマインド マップのノードの色と背景の設定を実装するにはどうすればよいですか?

Vue と jsmind を使用してマインド マップのノードの色と背景を設定するにはどうすればよいですか?

マインド マップは、思考を記録し整理するためによく使用されるツールです。実際のアプリケーションでは、さまざまなニーズに応じてマインド マップ ノードにさまざまな色や背景を設定することが必要になることがよくあります。この記事では、Vue と jsmind を使用してマインド マップのノードの色と背景の設定を実装する方法を紹介し、関連するコード例を示します。

1. 準備作業
   まず、Vue と jsmind 関連のライブラリをプロジェクトに導入する必要があります。次の方法で導入できます。

<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 引入jsmind -->
<script src="https://cdn.jsdelivr.net/npm/jsmind/dist/js/jsmind.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsmind/dist/style/jsmind.css">

さらに、マインド マップを配置するために、プロジェクト内に div 要素を作成する必要もあります。例:

<div id="mind-container"></div>

2. Vue インスタンスの作成
   次に、マインド マップのデータと操作を管理するために Vue インスタンスを作成する必要があります。

var vm = new Vue({
  el: '#mind-container',
  data: {
    mind: null,
    selectedNodeId: null,
  },
  mounted() {
    // 在mounted钩子函数中初始化jsmind
    this.initMind();
  },
  methods: {
    // 初始化jsmind
    initMind() {
      // 创建一个新的jsmind实例
      this.mind = jsMind.show({
        container: 'mind-container',
        format: 'node_array',
        editable: true,
        theme: 'primary',
        default_event_type: 'click',
        view: {
          h_margin: 100,
          v_margin: 50,
        },
        layout: {
          hspace: 20,
          vspace: 10,
          pspace: 20,
        },
        shortcut: {
          enable: true,
        },
        context_menu: {
          enable: true,
        },
      });

      // 监听思维导图节点的选中事件
      this.mind.add_event_listener((type, data) => {
        if (type === 'select_node') {
          this.selectedNodeId = data[0].id;
        }
      });
    },
    // 设置节点颜色
    setNodeColor(color) {
      var node = this.mind.get_node(this.selectedNodeId);
      node.data.style = {
        'background-color': color,
      };
      this.mind.update_node(node.id, node);
    },
    // 设置节点背景
    setNodeBackground(background) {
      var node = this.mind.get_node(this.selectedNodeId);
      node.data.style = {
        'background-image': 'url(' + background + ')',
      };
      this.mind.update_node(node.id, node);
    }
  },
});

上記のコードでは、Vue インスタンスを作成し、mounted フック関数で jsmind を初期化します。同時に、マインド マップを初期化し、マインド マップ ノードの選択イベントをリッスンする initMind メソッド、および setNodeColor および setNodeBackground を定義しました。ノードの色と背景を設定するメソッド。

3. ページ コードと効果の表示
   最後に、ユーザーがノードの色と背景を選択しやすくするために、対応するボタンとカラー セレクターをページに追加します。例:

<div>
  <h2>节点设置</h2>
  <div>
    <label for="color-picker">节点颜色:</label>
    <input type="color" id="color-picker" v-model="color">
    <button @click="setNodeColor(color)">设置</button>
  </div>
  <div>
    <label for="background-input">节点背景:</label>
    <input type="text" id="background-input" v-model="background">
    <button @click="setNodeBackground(background)">设置</button>
  </div>
</div>

上記のコードを通じて、カラー セレクターと背景入力ボックスを備えたページを実装しました。ユーザーは、色と背景を選択することで、マインド マップ ノードの色と背景を設定できます。画像のURLを入力します。

要約すると、Vue と jsmind を使用してマインド マップのノードの色と背景の設定を実装する方法を紹介しました。上記のコード例を通じて、特定のビジネス ニーズを満たすためにマインド マップのノードにさまざまな色と背景を簡単に設定できます。

以上がVue と jsmind を使用してマインド マップのノードの色と背景の設定を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。