Comment utiliser Vue et jsmind pour implémenter les fonctions d'étiquetage et d'annotation des nœuds des cartes mentales ?

Comment implémenter les fonctions d'étiquetage et d'annotation des nœuds des cartes mentales à l'aide de Vue et jsmind ?

Introduction : 
La carte mentale est un outil utilisé pour exprimer et organiser la pensée. Elle visualise la relation entre différents sujets et sous-thèmes à travers une structure arborescente, rendant les idées claires et faciles à comprendre. Dans les applications pratiques, nous avons souvent besoin de marquer et d’annoter les nœuds de la carte mentale pour mieux enregistrer et analyser le processus de réflexion. Cet article expliquera comment utiliser Vue et jsmind pour créer une carte mentale simple et implémenter des fonctions d'étiquetage et d'annotation de nœuds.

1. Préparation :

1. Installez Vue et jsmind.
   Exécutez la commande suivante dans le terminal :

   npm install vue
   npm install jsmind

2. Créez un projet Vue.
   Exécutez la commande suivante dans le terminal :

   vue create mindmap-demo

3. Introduisez jsmind.
   Ajoutez le code suivant dans le fichier d'entrée du projet (généralement main.js) : main.js）中添加以下代码：

   import jsmind from 'jsmind'
   Vue.use(jsmind)

二、构建思维导图：

1. 创建一个Vue组件Mindmap，用于承载思维导图。
   在src/components/Mindmap.vue文件中添加以下代码：

   <template>
     <div ref="mindmap"></div>
   </template>
   
   <script>
     export default {
       name: 'Mindmap',
       mounted() {
         const mindmap = new jsmind({
           container: this.$refs.mindmap,
           editable: true,
           view: {
             hmargin: 100,
             vmargin: 50,
           },
         })
         const mind = {
           meta: {
             name: '思维导图',
             author: '作者',
             version: '1.0',
           },
           format: 'node_array',
           data: [
             { id: 'root', isroot: true, topic: '主题' },
           ],
         }
         mindmap.show(mind)
       },
     }
   </script>

2. 在根组件App中使用Mindmap组件。
   在src/App.vue文件中添加以下代码：

   <template>
     <div id="app">
       <Mindmap></Mindmap>
     </div>
   </template>
   
   <script>
     import Mindmap from './components/Mindmap'
   
     export default {
       name: 'App',
       components: {
         Mindmap,
       },
     }
   </script>

3. 运行项目。
   在终端中运行以下命令：

   npm run serve

   打开浏览器，访问http://localhost:8080，即可看到一个空白的思维导图。

三、实现节点标注和注释功能：

1. 在Mindmap组件中添加节点标注和注释的方法。
   在src/components/Mindmap.vue文件中的mounted方法中添加以下代码：

   mounted() {
     // ...
   
     mindmap.add_node('root', 'node1', '节点1', { marker: '●', note: '这是节点1的注释。' })
   },

   以上代码表示在根节点上添加一个子节点，并添加标注和注释。

2. 在Mindmap组件中添加节点选择和编辑的方法。
   在src/components/Mindmap.vue文件中的mounted方法中添加以下代码：

   mounted() {
     // ...
   
     mindmap.enable_edit(function (node) {
       console.log('选中了节点：', node)
     }, function (node, value, callback) {
       if (typeof node !== 'object' || typeof value !== 'string' || typeof callback !== 'function') {
         return
       }
       console.log('编辑节点', node, '的内容为：', value)
       callback()
     });
   },

   以上代码表示开启节点选择和编辑的功能，并在相应的回调函数中打印相关信息。

3. 运行项目。
   在终端中运行以下命令：

   npm run serve

   打开浏览器，访问http://localhost:8080rrreee

2. Construisez une carte mentale :

🎜Créez un composant Vue Mindmap, utilisé pour héberger des cartes mentales. 🎜Ajoutez le code suivant dans le fichier <code>src/components/Mindmap.vue : 🎜rrreee🎜🎜🎜Utilisez le composant Mindmap dans le composant racine App. 🎜Ajoutez le code suivant dans le fichier src/App.vue : 🎜rrreee🎜🎜🎜Exécutez le projet. 🎜Exécutez la commande suivante dans le terminal : 🎜rrreee🎜Ouvrez le navigateur et visitez http://localhost:8080 pour voir une carte mentale vierge. 🎜🎜🎜🎜3. Implémenter les fonctions d'étiquetage et d'annotation des nœuds : 🎜🎜🎜🎜 Méthode pour ajouter un étiquetage et une annotation des nœuds dans le composant Mindmap. 🎜Ajoutez le code suivant dans la méthode Mounted dans le fichier src/components/Mindmap.vue : 🎜rrreee🎜Le code ci-dessus signifie ajouter un nœud enfant au nœud racine et ajout d'annotations et d'annotations. 🎜🎜🎜🎜Ajoutez des méthodes de sélection et d'édition de nœuds dans le composant Mindmap. 🎜Ajoutez le code suivant dans la méthode Mounted dans le fichier src/components/Mindmap.vue : 🎜rrreee🎜Le code ci-dessus indique que la fonction de sélection et d'édition des nœuds est activé et l'impression correspondante des informations pertinentes dans la fonction de rappel. 🎜🎜🎜🎜Exécutez le projet. 🎜Exécutez la commande suivante dans le terminal : 🎜rrreee🎜Ouvrez le navigateur et visitez http://localhost:8080 pour voir une carte mentale avec des fonctions d'annotation et d'annotation. 🎜🎜🎜🎜Conclusion : 🎜L'utilisation de Vue et de jsmind peut facilement créer des cartes mentales et implémenter des fonctions d'étiquetage et d'annotation de nœuds. Grâce aux étapes ci-dessus, nous pouvons rapidement créer une carte mentale simple et étiqueter et annoter les nœuds si nécessaire. J'espère que cet article vous sera utile et je vous souhaite d'être plus efficace dans votre réflexion et votre apprentissage ! 🎜

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!