Bagaimana untuk melaksanakan lakaran kenit dan fungsi navigasi nod peta minda menggunakan Vue dan jsmind?

Gunakan Vue dan jsmind untuk melaksanakan lakaran kenit dan fungsi navigasi nod peta minda

Peta minda ialah organisasi pengetahuan dan alat berfikir yang biasa digunakan yang boleh membantu kita memaparkan struktur pemikiran kita dengan jelas dan membantu kita lebih memahami Memahami dan mengekalkan pengetahuan . Dalam aplikasi praktikal, kita selalunya perlu memaparkan peta minda yang besar, dan menavigasi dalam peta minda yang besar boleh menjadi sangat sukar. Untuk menyelesaikan masalah ini, kami boleh menggunakan rangka kerja Vue dan pemalam jsmind untuk melaksanakan lakaran kenit dan fungsi navigasi nod peta minda.

Pertama sekali, kita perlu menyediakan persekitaran untuk Vue dan jsmind Anda boleh menggunakan CDN untuk memperkenalkan fail perpustakaan Vue dan jsmind, atau anda boleh menggunakan npm untuk memasang dan memperkenalkannya. Seterusnya, kita boleh mula menulis komponen Vue untuk melaksanakan lakaran kenit dan fungsi navigasi peta minda.

Mula-mula, mari buat komponen Vue yang dipanggil "MindMap". Dalam komponen, kita perlu memperkenalkan pemalam jsmind terlebih dahulu:

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

Kemudian, kita boleh menambah bekas div untuk memaparkan peta minda dalam templat komponen Vue:

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

Dalam skrip komponen Vue, kita boleh menggunakan fungsi Hook Vue untuk memulakan pemalam jsmind dan mencipta peta minda:

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

Dalam kod di atas, kita dapat melihat bahawa satu set nod ditakrifkan dalam objek minda, setiap nod mempunyai id unik, induk nod induk, dan topik nod. Kita boleh memanjangkan dan mengubah suai sifat nod mengikut keperluan khusus. Kita juga perlu menentukan objek pilihan untuk mengkonfigurasi beberapa parameter jsmind. Akhir sekali, dengan memanggil fungsi "jsMind.show" dan menentukan ID bekas peta minda, objek minda dan objek pilihan, peta minda boleh dipaparkan pada halaman.

Seterusnya, kita boleh menambah imej kecil dan fungsi navigasi pada peta minda. Dalam fungsi yang dipasang bagi komponen Vue, kita boleh terus menambah kod berikut:

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);
}

Dalam kod di atas, kita mula-mula mencipta imej kecil peta minda dengan memanggil fungsi "jm.get_view" dan menambahnya pada fail dinamakan bekas div "bekas lakaran kecil". Seterusnya, kami mencipta bar navigasi peta minda dengan memanggil fungsi "jm.get_selective_menu" dan menambahnya pada bekas div bernama "navigator-container".

Akhir sekali, kami perlu menambah bekas div yang sepadan dalam templat komponen Vue:

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

Pada ketika ini, kami telah menyelesaikan penulisan kod untuk melaksanakan lakaran kenit dan fungsi navigasi nod peta minda menggunakan Vue dan jsmind. Melalui contoh kod di atas, kita boleh memaparkan peta minda dalam komponen Vue dan mencipta lakaran kecil dan bar navigasi yang sepadan pada halaman. Dengan cara ini kita boleh menavigasi dan melihat peta minda yang besar dengan lebih mudah.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lakaran kenit dan fungsi navigasi nod peta minda menggunakan Vue dan jsmind?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!