Comment implémenter la méthode de connexion de nœuds et la gestion des relations hiérarchiques des cartes mentales via Vue et jsmind ?

Comment implémenter la méthode de connexion de nœuds et la gestion des relations hiérarchiques des cartes mentales via Vue et jsmind ?

La cartographie mentale est un outil de réflexion graphique couramment utilisé qui peut nous aider à mieux organiser et clarifier nos idées. Vue.js et jsmind sont deux outils de développement front-end très populaires qui peuvent nous aider à réaliser la méthode de connexion de nœuds et la gestion des relations hiérarchiques des cartes mentales.

Dans cet article, je vais vous présenter comment utiliser Vue.js et jsmind pour créer et gérer des cartes mentales.

Tout d'abord, nous devons créer un projet Vue.js et introduire la bibliothèque jsmind. Vous pouvez utiliser npm pour installer Vue.js et jsmind, ou vous pouvez les introduire directement via CDN.

Installez Vue.js :

npm install vue

Installez jsmind :

npm install jsmind

Introduisez Vue.js et jsmind :

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/jsmind"></script>

Ensuite, nous pouvons créer un conteneur dans le composant Vue pour placer la carte mentale de jsmind.

<template>
  <div>
    <div ref="jsmindContainer"></div>
    <button @click="addChildNode">添加子节点</button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 创建jsmind实例
    const jsmindInstance = new jsmind(this.$refs.jsmindContainer);

    // 创建根节点
    const rootNode = {
      id: 'root',
      isroot: true,
      topic: '思维导图',
      children: [],
    }

    // 初始化jsmind
    jsmindInstance.show();
    jsmindInstance.shoot(rootNode);
  },
  methods: {
    addChildNode() {
      // 获取jsmind实例
      const jsmindInstance = jsmind.findInstance(this.$refs.jsmindContainer);

      // 获取根节点
      const rootNode = jsmindInstance.get_data('node_tree');

      // 创建新的子节点
      const newChildNode = {
        id: 'child1',
        topic: '子节点1',
        direction: 'right',
        children: [],
      };

      // 添加子节点
      jsmind.add_node(rootNode, newChildNode);

      // 刷新jsmind
      jsmindInstance.update_node();
    }
  }
}
</script>

Dans le code ci-dessus, nous créons d'abord une instance jsmind dans le cycle de vie monté du composant Vue et créons un nœud racine. Ensuite, nous utilisons la méthode jsmindInstance.show() et la méthode jsmindInstance.shoot() pour afficher et restituer la carte mentale. mounted生命周期中创建了一个jsmind实例，并创建了一个根节点。然后，我们使用jsmindInstance.show()方法和jsmindInstance.shoot()方法来展示和渲染思维导图。

接下来，在Vue组件的methods中，我们定义了一个addChildNode方法，用于在点击按钮时添加一个子节点。在该方法中，我们首先获取jsmind实例，然后获取根节点，然后创建一个新的子节点，最后使用jsmind.add_node()方法将子节点添加到根节点中。

最后，我们使用jsmindInstance.update_node()

Ensuite, dans les méthodes du composant Vue, nous définissons une méthode addChildNode pour ajouter un nœud enfant lorsque le bouton est cliqué. Dans cette méthode, nous obtenons d'abord l'instance jsmind, puis le nœud racine, puis créons un nouveau nœud enfant et enfin utilisons la méthode jsmind.add_node() pour ajouter le nœud enfant au nœud racine. .

Enfin, nous utilisons la méthode jsmindInstance.update_node() pour actualiser la carte mentale afin de mettre à jour l'affichage après l'ajout de nœuds.

Grâce à l'exemple de code ci-dessus, nous pouvons implémenter la fonction d'ajout de nœuds enfants dans la carte mentale. De même, nous pouvons également implémenter des fonctions telles que la suppression, la modification et le glissement d'autres nœuds. 🎜🎜Grâce à la combinaison de Vue.js et jsmind, nous pouvons facilement créer et gérer les connexions de nœuds et les relations hiérarchiques des cartes mentales. Cela nous offre une grande commodité pour organiser et trier nos idées, et apporte également plus de possibilités à notre travail de développement front-end. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!