Comment implémenter des opérations de branchement et de fractionnement de cartes mentales à l'aide de Vue et jsmind ?

Comment implémenter des opérations de branchement et de fractionnement de cartes mentales à l'aide de Vue et jsmind ?

La carte mentale est un outil couramment utilisé pour réfléchir et organiser la pensée. Elle peut nous aider à afficher et à comprendre clairement la relation entre les problèmes, les idées et la pensée. Dans le développement front-end, nous pouvons utiliser les bibliothèques Vue et jsmind pour implémenter des opérations de branchement et de fractionnement de cartes mentales.

Tout d'abord, nous devons introduire la bibliothèque jsmind dans le projet Vue. Vous pouvez installer jsmind via npm, ou télécharger directement le fichier jsmind.js et l'introduire dans le projet.

Dans le composant Vue, nous définissons un composant "MindMap" pour afficher et exploiter des cartes mentales. Dans la partie modèle, nous créons un élément div en tant que conteneur pour la carte mentale et lui définissons un identifiant unique :

<template>
  <div id="mindMap"></div>
</template>

Dans le composant Vue, nous pouvons initialiser et restituer la carte mentale dans la fonction hook de cycle de vie montée. Dans la fonction montée, nous devons d'abord obtenir l'élément DOM du conteneur de carte mentale, puis créer une instance de jsmind et la restituer dans le conteneur :

<script>
import jsMind from 'jsmind'

export default {
  mounted() {
    const container = document.getElementById('mindMap')

    // 创建jsmind实例
    const options = {
      container,
      editable: true // 设置思维导图可编辑
    }
    const mindMap = jsMind.show(options)

    // 渲染思维导图
    const mindData = {
      'format': 'node_tree',
      'data': [
        {'id': 'root', 'isroot': true, 'topic': '思维导图'}
      ]
    }
    mindMap.show(mindData)
  }
}
</script>

Dans le code ci-dessus, nous créons une instance de jsmind et la rendons au conteneur avec l'identifiant "mindMap". Nous définissons également un nœud initial pour la carte mentale, dont le sujet est « Mind Map ».

Ensuite, nous pouvons implémenter des opérations de branchement et de fractionnement en ajoutant des boutons et des zones de saisie. Dans le modèle, nous ajoutons un bouton et une zone de saisie :

<template>
  <div>
    <div id="mindMap"></div>
    <div>
      <input type="text" v-model="newNodeText" placeholder="输入新节点的内容">
      <button @click="addNode">添加节点</button>
    </div>
  </div>
</template>

Dans le composant Vue, nous définissons une méthode addNode pour gérer la logique d'ajout de nœuds. Dans la méthode addNode, nous obtenons d'abord le texte du nouveau nœud dans la zone de saisie, puis l'ajoutons en tant que nœud enfant au nœud actuellement sélectionné :

<script>
import jsMind from 'jsmind'

export default {
  data() {
    return {
      newNodeText: ''
    }
  },
  mounted() {
    // 省略部分代码...

    const mindMap = jsMind.show(options)

    // 省略部分代码...
  },
  methods: {
    addNode() {
      const mindMap = jsMind.get_current_jm()
      const selectedNode = mindMap.get_selected_node()
      const newNodeText = this.newNodeText

      if (selectedNode) {
        const newNodeId = selectedNode.id + '1'
        const newNode = {
          'id': newNodeId,
          'topic': newNodeText
        }
        mindMap.add_node(selectedNode, newNode, 'right')
      }
    }
  }
}
</script>

Dans le code ci-dessus, nous l'obtenons en appelant jsMind.get_current_jm() method L'instance jsmind actuelle, puis utilisez la méthode mindMap.get_selected_node() pour obtenir le nœud actuellement sélectionné. Ensuite, nous utilisons le texte dans la zone de saisie comme contenu du nouveau nœud, créons un nouvel objet nœud et l'ajoutons à droite du nœud actuellement sélectionné.

À ce stade, nous avons implémenté les opérations de branchement et de fractionnement de la carte mentale à l'aide de Vue et jsmind dans le projet Vue. Lorsque nous saisissons du texte dans la zone de saisie et cliquons sur le bouton "Ajouter un nœud", le nouveau nœud sera ajouté à droite du nœud actuellement sélectionné.

Les exemples ci-dessus montrent comment utiliser Vue et jsmind pour implémenter des opérations de branchement et de fractionnement sur des cartes mentales. J'espère que cela aide!

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!