Bagaimana untuk menggunakan Vue dan jsmind untuk melaksanakan pautan nod dan lompatan dalaman dalam peta minda?-View.js-php.cn

Bagaimana untuk menggunakan Vue dan jsmind untuk melaksanakan pautan nod dan lompatan dalaman dalam peta minda?

WBOY

Lepaskan： 2023-08-16 13:41:10

asal

1562 orang telah melayarinya

Bagaimana untuk menggunakan Vue dan jsmind untuk melaksanakan pautan nod dan lompatan dalaman dalam peta minda?

Pemetaan minda ialah alat yang membantu kita menyusun pemikiran kita dan memaparkan pemikiran kita. Dalam aplikasi moden, kami boleh menggunakan perpustakaan Vue.js dan jsmind untuk mencipta peta minda interaktif. Artikel ini akan memperkenalkan cara menggunakan Vue dan jsmind untuk melaksanakan pautan nod dan lompatan dalaman dalam peta minda.

Pertama, kita perlu memasang perpustakaan Vue dan jsmind. Perpustakaan ini tersedia melalui npm atau CDN. Dalam projek Vue, kita boleh menambah kebergantungan berikut dalam fail package.json: package.json文件中添加以下依赖项：

{
  "dependencies": {
    "vue": "^2.6.11",
    "jsmind": "^1.0.3"
  }
}

Salin selepas log masuk

然后，我们可以创建一个Vue组件来承载思维导图。在模板中，我们可以使用<div>元素来包装jsmind的DOM元素。在Vue的mounted()生命周期钩子中，我们可以初始化思维导图并渲染节点。下面是一个简单的Vue组件示例：

<template>
  <div>
    <div ref="jsMindContainer"></div>
  </div>
</template>

<script>
import { jm } from 'jsmind'
import 'jsmind/style/jsmind.css'

export default {
  mounted() {
    const mind = {}
    const options = {
      container: 'jsMindContainer',
      theme: 'default'
    }
    const jmInstance = jm.init(options)
    jmInstance.show(mind)
  }
}
</script>

Salin selepas log masuk

代码中，我们首先从jsmind库中导入jm对象，并在组件的mounted()方法中使用这个对象初始化思维导图。我们还在options对象中指定了思维导图容器的名称为jsMindContainer。在Vue的模板中，我们在<div>元素内指定了一个ref属性来引用这个容器。

现在我们已经能够渲染出一个空的思维导图了。接下来，我们将展示如何实现思维导图的节点链接和内部跳转。

首先，我们需要在思维导图的数据结构中添加链接属性。在每个节点对象中，我们可以添加一个url属性来表示该节点的链接地址。例如：

const mind = {
  "meta": {
    "name": "思维导图",
    "author": "你的名字"
  },
  "format": "node_array",
  "data": [
    { "id": "root", "isroot": true, "topic": "根节点" },
    { "id": "node1", "parentid": "root", "topic": "节点1", "url": "http://example.com" },
    { "id": "node2", "parentid": "root", "topic": "节点2", "url": "" },
    { "id": "node3", "parentid": "root", "topic": "节点3", "url": "" }
  ]
}

Salin selepas log masuk

在上述代码中，我们在data数组的每个节点对象中添加了一个url属性。该属性可以存储节点的链接地址。节点1的链接地址为http://example.com，而节点2和节点3没有链接地址。

接下来，我们需要在思维导图渲染的节点模板中添加链接。我们可以使用jsmind的show方法的第二个参数来自定义节点。我们可以使用Vue的v-html指令来渲染节点的内容，并根据链接属性条件性地添加<a>标签。以下是修改后的Vue组件示例代码：

<template>
  <div>
    <div ref="jsMindContainer"></div>
  </div>
</template>

<script>
import { jm } from 'jsmind'
import 'jsmind/style/jsmind.css'

export default {
  mounted() {
    const mind = {
      "meta": {
        "name": "思维导图",
        "author": "你的名字"
      },
      "format": "node_array",
      "data": [
        { "id": "root", "isroot": true, "topic": "根节点" },
        { "id": "node1", "parentid": "root", "topic": "节点1", "url": "http://example.com" },
        { "id": "node2", "parentid": "root", "topic": "节点2", "url": "" },
        { "id": "node3", "parentid": "root", "topic": "节点3", "url": "" }
      ]
    }
    
    const options = {
      container: 'jsMindContainer',
      theme: 'default'
    }
    
    const jmInstance = jm.init(options)
    
    jmInstance.show(mind, node => {
      const topic = node.topic || ''
      const url = node.data.url || ''
     
      if (url) {
        return `<a href="${url}">${topic}</a>`
      } else {
        return topic
      }
    })
  }
}
</script>

Salin selepas log masuk

在上述代码中，我们在jmInstance.show()方法的第二个参数中回调函数中根据节点的链接属性条件性地添加了<a>标签。如果链接属性存在，则使用<a>标签包装节点文本，否则只渲染节点文本。

现在，当我们点击具有链接的节点时，将会打开一个新的标签页并跳转到链接地址。而对于没有链接的节点，点击后不会触发任何操作。

总结起来，使用Vue和jsmind实现思维导图的节点链接和内部跳转只需添加节点的链接属性，并在节点模板中根据链接属性条件性地添加<a>rrreee

Kemudian, kita boleh mencipta komponen Vue untuk mengehoskan peta minda. Dalam templat, kita boleh menggunakan elemen

<div> untuk membungkus elemen DOM jsmind. Dalam cangkuk kitaran hayat mounted() Vue, kita boleh memulakan peta minda dan menghasilkan nod. Berikut ialah contoh komponen Vue yang mudah: 🎜rrreee🎜Dalam kod, kami mula-mula mengimport objek jm daripada pustaka jsmind dan memasangnya dalam  komponen mounted() untuk memulakan peta minda. Kami juga menyatakan nama bekas peta minda sebagai <code>jsMindContainer dalam objek options. Dalam templat Vue, kami menentukan atribut ref dalam elemen <div> untuk merujuk bekas ini. 🎜🎜Kini kami dapat membuat peta minda kosong. Seterusnya, kami akan menunjukkan cara untuk melaksanakan pautan nod dan lompatan dalaman dalam peta minda. 🎜🎜Pertama, kita perlu menambah atribut pautan pada struktur data peta minda. Dalam setiap objek nod, kita boleh menambah atribut url untuk mewakili alamat pautan nod. Contohnya: 🎜rrreee🎜Dalam kod di atas, kami menambahkan atribut url pada setiap objek nod dalam tatasusunan data. Atribut ini boleh menyimpan alamat pautan nod. Alamat pautan nod 1 ialah http://example.com, manakala nod 2 dan 3 tidak mempunyai alamat pautan. 🎜🎜Seterusnya, kita perlu menambah pautan dalam templat nod pemaparan peta minda. Kita boleh menggunakan parameter kedua kaedah show jsmind untuk menyesuaikan nod. Kami boleh menggunakan arahan v-html Vue untuk memaparkan kandungan nod dan menambahkan teg <a> secara bersyarat berdasarkan atribut pautan. Berikut ialah kod sampel komponen Vue yang diubah suai: 🎜rrreee🎜Dalam kod di atas, kami menetapkan fungsi panggil balik secara bersyarat berdasarkan atribut pautan nod dalam parameter kedua jmInstance.show() kaedah Menambah teg <a>. Jika atribut pautan wujud, teks nod dibalut dengan teg <a>, jika tidak, hanya teks nod yang dipaparkan. 🎜🎜Kini, apabila kita mengklik pada nod dengan pautan, tab baharu akan dibuka dan melompat ke alamat pautan. Untuk nod tanpa pautan, tiada operasi akan dicetuskan selepas mengklik. 🎜🎜Ringkasnya, untuk menggunakan Vue dan jsmind untuk melaksanakan pautan nod dan lompatan dalaman dalam peta minda, anda hanya perlu menambah atribut pautan nod dan menambahkan <a>secara bersyarat dalam nod templat berdasarkan atribut pautan. Kod sampel di atas boleh membantu kami menyelesaikan tugas ini. Harap artikel ini dapat membantu anda! 🎜