Comment utiliser Vue et jsmind pour implémenter des liens de nœuds et des sauts internes dans les cartes mentales ?

Comment implémenter des liens de nœuds et des sauts internes dans des cartes mentales à l'aide de Vue et jsmind ?

La cartographie mentale est un outil qui nous aide à organiser nos pensées et à afficher notre réflexion. Dans les applications modernes, nous pouvons utiliser les bibliothèques Vue.js et jsmind pour créer des cartes mentales interactives. Cet article expliquera comment utiliser Vue et jsmind pour implémenter des liens de nœuds et des sauts internes dans les cartes mentales.

Tout d'abord, nous devons installer les bibliothèques Vue et jsmind. Ces bibliothèques sont disponibles via npm ou CDN. Dans le projet Vue, nous pouvons ajouter les dépendances suivantes dans le fichier package.json : package.json文件中添加以下依赖项：

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

然后，我们可以创建一个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>

代码中，我们首先从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": "" }
  ]
}

在上述代码中，我们在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>

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

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

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

Ensuite, nous pouvons créer un composant Vue pour héberger la carte mentale. Dans le modèle, nous pouvons utiliser l'élément <div> pour envelopper l'élément jsmind DOM. Dans le hook de cycle de vie Mounted() de Vue, nous pouvons initialiser la carte mentale et restituer les nœuds. Voici un exemple simple de composant Vue : 🎜rrreee🎜Dans le code, nous importons d'abord l'objet jm de la bibliothèque jsmind et l'installons dans le du composant. Mounted() pour initialiser la carte mentale. Nous avons également spécifié le nom du conteneur de carte mentale comme <code>jsMindContainer dans l'objet options. Dans le modèle Vue, nous spécifions un attribut ref dans l'élément <div> pour référencer ce conteneur. 🎜🎜Nous sommes désormais en mesure de restituer une carte mentale vide. Ensuite, nous montrerons comment implémenter des liens de nœuds et des sauts internes dans les cartes mentales. 🎜🎜Tout d'abord, nous devons ajouter l'attribut link à la structure de données de la carte mentale. Dans chaque objet nœud, nous pouvons ajouter un attribut url pour représenter l'adresse de lien du nœud. Par exemple : 🎜rrreee🎜Dans le code ci-dessus, nous avons ajouté un attribut url à chaque objet nœud dans le tableau data. Cet attribut peut stocker l'adresse de lien du nœud. L'adresse de lien du nœud 1 est http://example.com, tandis que les nœuds 2 et 3 n'ont pas d'adresse de lien. 🎜🎜Ensuite, nous devons ajouter des liens dans le modèle de nœud du rendu de la carte mentale. Nous pouvons utiliser le deuxième paramètre de la méthode show de jsmind pour personnaliser le nœud. Nous pouvons utiliser la directive v-html de Vue pour restituer le contenu du nœud et ajouter conditionnellement la balise <a> en fonction de l'attribut de lien. Voici l'exemple de code modifié du composant Vue : 🎜rrreee🎜Dans le code ci-dessus, nous appelons conditionnellement la fonction de rappel en fonction de l'attribut de lien du nœud dans le deuxième paramètre de jmInstance.show() méthode Ajout de la balise <a>. Si l'attribut de lien existe, le texte du nœud est enveloppé avec la balise <a>, sinon seul le texte du nœud est rendu. 🎜🎜Maintenant, lorsque nous cliquons sur un nœud avec un lien, un nouvel onglet s'ouvrira et passera à l'adresse du lien. Pour les nœuds sans liens, aucune opération ne sera déclenchée après un clic. 🎜🎜Pour résumer, l'utilisation de Vue et jsmind pour implémenter des liens de nœuds et des sauts internes dans les cartes mentales nécessite uniquement l'ajout de l'attribut de lien du nœud et l'ajout conditionnel de <a>dans le modèle de nœud basé sur le lien. attribut > Balise. L'exemple de code ci-dessus peut nous aider à accomplir cette tâche. J'espère que cet article pourra vous être utile ! 🎜