Comment implémenter les fonctions de recherche et de filtrage des cartes mentales via Vue et jsmind ?

Comment implémenter les fonctions de recherche et de filtrage des cartes mentales via Vue et jsmind ?

La carte mentale est un outil couramment utilisé pour enregistrer et organiser la pensée, qui peut aider les gens à afficher et à comprendre plus clairement la relation entre les informations. Cependant, lorsqu’il y a un grand nombre de nœuds dans la carte mentale, il devient très difficile de trouver des nœuds spécifiques. Afin de résoudre ce problème, nous pouvons combiner Vue et jsmind pour implémenter les fonctions de recherche et de filtrage de la carte mentale afin d'aider les utilisateurs à trouver plus rapidement les nœuds requis.

Ci-dessous, nous expliquerons comment utiliser Vue et jsmind pour implémenter les fonctions de recherche et de filtrage des cartes mentales. Tout d'abord, nous devons préparer des données contenant la structure de la carte mentale, comme indiqué ci-dessous :

const mindData = {
    "meta": {
        "name": "思维导图",
        "version": "0.2.0"
    },
    "format": "node_tree",
    "data": {
        "id": "root",
        "topic": "思维导图",
        "expanded": true,
        "children": [{
            "id": "1",
            "topic": "节点1",
            "expanded": true,
            "children": [{
                    "id": "1.1",
                    "topic": "子节点1.1",
                    "expanded": true,
                    "children": []
                },
                {
                    "id": "1.2",
                    "topic": "子节点1.2",
                    "expanded": true,
                    "children": []
                }
            ]
        }]
    }
};

Ensuite, nous devons introduire la bibliothèque jsmind dans l'instance Vue et transmettre les données de la carte mentale à l'instance jsmind pour restituer l'image de la carte mentale. . En même temps, ajoutez des zones et des boutons de saisie de recherche et de filtrage dans le modèle de Vue :

<template>
  <div>
    <input v-model="searchText" type="text" placeholder="在思维导图中搜索" />
    <button @click="filterMinds">搜索</button>
    <div ref="jsmindContainer"></div>
  </div>
</template>

Ensuite, dans le script de Vue, définissez les données et les fonctions pertinentes pour implémenter les fonctions de recherche et de filtrage de la carte mentale :

<script>
import jsMind from "jsmind";
import "jsmind/style/jsmind.css";

export default {
  data() {
    return {
      mind: null,
      searchText: ""
    };
  },
  mounted() {
    this.initMind();
  },
  methods: {
    initMind() {
      const container = this.$refs.jsmindContainer;

      this.mind = new jsMind({
          container,
          editable: false
      });
      
      this.mind.show(mindData);
    },
    filterMinds() {
      const nodes = mindData.data.children[0].children;

      for (let i = nodes.length - 1; i > -1; i--) {
          if (!nodes[i].topic.includes(this.searchText)) {
              nodes.splice(i, 1);
          }
      }

      this.mind.show(mindData);
    }
  }
};
</script>

Dans ce qui précède. le code, nous initialisons d’abord la carte mentale dans le hook de cycle de vie monté et la restituons sur la page. Ensuite, une fonction filterMinds est définie pour filtrer les nœuds de la carte mentale en fonction des mots-clés de recherche. Cette fonction parcourt les nœuds pour déterminer si la rubrique du nœud contient le mot-clé de recherche. Si ce n'est pas le cas, supprimez le nœud du tableau de nœuds. Enfin, appelez la méthode mind.show pour restituer la carte mentale.

Enfin, ajoutez le composant Vue ci-dessus à l'instance racine de Vue et introduisez la bibliothèque jsmind dans la page pour voir la carte mentale et le champ de recherche. Les utilisateurs peuvent saisir des mots-clés dans la zone de recherche et cliquer sur le bouton de recherche. Les nœuds de la carte mentale seront filtrés en fonction des mots-clés et la carte mentale sera restituée. De cette manière, les utilisateurs peuvent trouver plus rapidement les nœuds requis.

Ce qui précède est une introduction à la façon d'implémenter les fonctions de recherche et de filtrage des cartes mentales via Vue et jsmind. 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!