Comment implémenter les fonctions de vignette et de navigation des nœuds de carte mentale à l'aide de Vue et jsmind ?

Utilisez Vue et jsmind pour implémenter les fonctions de vignette et de navigation des nœuds de la carte mentale

La carte mentale est un outil d'organisation des connaissances et de réflexion couramment utilisé qui peut nous aider à afficher clairement notre structure de pensée et à mieux comprendre Comprendre et retenir les connaissances . Dans les applications pratiques, nous devons souvent afficher de grandes cartes mentales, et naviguer dans de grandes cartes mentales peut devenir très difficile. Afin de résoudre ce problème, nous pouvons utiliser le framework Vue et le plug-in jsmind pour implémenter les fonctions de vignette et de navigation des nœuds de carte mentale.

Tout d'abord, nous devons préparer l'environnement pour Vue et jsmind. Vous pouvez utiliser CDN pour introduire les fichiers de bibliothèque de Vue et jsmind, ou vous pouvez utiliser npm pour les installer et les présenter. Ensuite, nous pouvons commencer à écrire des composants Vue pour implémenter les fonctions de vignette et de navigation de la carte mentale.

Tout d'abord, créons un composant Vue appelé "MindMap". Dans le composant, nous devons d'abord introduire le plug-in jsmind :

<script src="https://unpkg.com/jsmind/dist/jsmind.min.js"></script>

Ensuite, nous pouvons ajouter un conteneur div pour afficher la carte mentale dans le modèle du composant Vue :

<template>
  <div id="mindmap-container"></div>
</template>

Dans le script du composant Vue, nous pouvons utiliser la fonction Hook de Vue pour initialiser le plug-in jsmind et créer une carte mentale :

<script>
export default {
  mounted() {
    // 初始化jsmind插件
    var mind = {
      "meta": {
        "name": "思维导图"
      },
      "format": "node_array",
      "data": [
        {"id":"1", "isroot": true, "topic": "根节点"},
        {"id":"2", "parentid":"1", "topic": "节点1"},
        {"id":"3", "parentid":"1", "topic": "节点2"},
        {"id":"4", "parentid":"2", "topic": "节点1.1"},
        {"id":"5", "parentid":"2", "topic": "节点1.2"},
        // 更多节点...
      ]
    };
    var options = {};
    var jm = jsMind.show('mindmap-container', mind, options);
  }
}
</script>

Dans le code ci-dessus, nous pouvons voir qu'un ensemble de nœuds sont définis dans l'objet mental, chaque nœud a un identifiant unique, le l'ID parent du nœud parent et le sujet du nœud. Nous pouvons étendre et modifier les propriétés des nœuds en fonction de besoins spécifiques. Nous devons également définir un objet options pour configurer certains paramètres de jsmind. Enfin, en appelant la fonction « jsMind.show » et en spécifiant l'identifiant du conteneur, l'objet mental et l'objet options de la carte mentale, la carte mentale peut être affichée sur la page.

Ensuite, nous pouvons ajouter des vignettes et des fonctions de navigation à la carte mentale. Dans la fonction montée du composant Vue, on peut continuer à ajouter le code suivant :

mounted() {
  // 初始化jsmind插件
  var mind = {
    //...
  };
  var options = {};
  var jm = jsMind.show('mindmap-container', mind, options);

  // 创建缩略图
  var thumbnail = jm.get_view();
  var thumbnailContainer = document.getElementById('thumbnail-container');
  thumbnailContainer.appendChild(thumbnail);

  // 创建导航栏
  var navigator = jm.get_selective_menu();
  var navigatorContainer = document.getElementById('navigator-container');
  navigatorContainer.appendChild(navigator);
}

Dans le code ci-dessus, on crée d'abord une vignette de la mind map en appelant la fonction "jm.get_view" et on l'ajoute au fichier conteneur div nommé « conteneur de vignettes ». Ensuite, nous créons la barre de navigation de la carte mentale en appelant la fonction "jm.get_selective_menu" et l'ajoutons au conteneur div nommé "navigator-container".

Enfin, nous devons ajouter le conteneur div correspondant dans le modèle du composant Vue :

<template>
  <div>
    <div id="mindmap-container"></div>
    <div id="thumbnail-container"></div>
    <div id="navigator-container"></div>
  </div>
</template>

À ce stade, nous avons terminé l'écriture du code pour implémenter les fonctions de vignette et de navigation du nœud de carte mentale à l'aide de Vue et jsmind. Grâce à l'exemple de code ci-dessus, nous pouvons afficher la carte mentale dans le composant Vue et créer la vignette et la barre de navigation correspondantes sur la page. De cette façon, nous pouvons plus facilement naviguer et visualiser de grandes cartes mentales.

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!