Bagaimana untuk melaksanakan fungsi carian dan penapisan peta minda melalui Vue dan jsmind?

Bagaimana untuk melaksanakan fungsi carian dan penapisan peta minda melalui Vue dan jsmind?

Peta minda ialah alat yang biasa digunakan untuk merekod dan mengatur pemikiran, yang boleh membantu orang ramai memaparkan dan memahami hubungan antara maklumat dengan lebih jelas. Walau bagaimanapun, apabila terdapat sejumlah besar nod dalam peta minda, ia menjadi sangat sukar untuk mencari nod tertentu. Untuk menyelesaikan masalah ini, kami boleh menggabungkan Vue dan jsmind untuk melaksanakan fungsi carian dan penapisan peta minda untuk membantu pengguna mencari nod yang diperlukan dengan lebih cepat.

Di bawah ini kami akan memperkenalkan cara menggunakan Vue dan jsmind untuk melaksanakan fungsi carian dan penapisan peta minda. Pertama, kita perlu menyediakan data yang mengandungi struktur peta minda, seperti yang ditunjukkan di bawah:

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": []
                }
            ]
        }]
    }
};

Seterusnya, kita perlu memperkenalkan perpustakaan jsmind ke dalam contoh Vue dan menghantar data peta minda kepada contoh jsmind untuk menjadikan gambar peta minda . Pada masa yang sama, tambahkan kotak dan butang input carian dan penapis dalam templat Vue:

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

Kemudian, dalam skrip Vue, tentukan data dan fungsi yang berkaitan untuk melaksanakan fungsi carian dan penapis peta minda:

<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>

Dalam In di atas kod, kita mula-mula memulakan peta minda dalam cangkuk kitaran hayat yang dipasang dan memaparkannya pada halaman. Kemudian, fungsi filterMinds ditakrifkan untuk menapis nod peta minda berdasarkan kata kunci carian. Fungsi ini merentasi nod untuk menentukan sama ada topik nod mengandungi kata kunci carian Jika tidak, padamkan nod daripada tatasusunan nod. Akhir sekali, panggil kaedah mind.show untuk memaparkan semula peta minda.

Akhir sekali, tambahkan komponen Vue di atas pada contoh akar Vue, dan perkenalkan perpustakaan jsmind ke dalam halaman untuk melihat peta minda dan kotak carian. Pengguna boleh memasukkan kata kunci dalam kotak carian dan klik butang carian, dan nod peta minda akan ditapis berdasarkan kata kunci dan peta minda akan dipaparkan semula. Dengan cara ini, pengguna boleh mencari nod yang diperlukan dengan lebih cepat.

Di atas adalah pengenalan kepada cara melaksanakan fungsi carian dan penapisan peta minda melalui Vue dan jsmind. Harap ini membantu!

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi carian dan penapisan peta minda melalui Vue dan jsmind?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!