Comment implémenter la personnalisation du style de nœud et le changement d'apparence des cartes mentales à l'aide de Vue et jsmind ?

Comment implémenter la personnalisation du style de nœud et le changement d'apparence des cartes mentales à l'aide de Vue et jsmind ?

La carte mentale est un outil de réflexion couramment utilisé, qui peut nous aider à organiser nos pensées, à enregistrer notre processus de réflexion et à montrer nos relations. Vue.js est un framework frontal populaire et jsmind est un plug-in de cartographie mentale basé sur Vue. Il fournit une API riche qui peut facilement personnaliser les styles de nœuds et implémenter le changement de skin.

Tout d'abord, nous devons installer et introduire jsmind et Vue.js. Vous pouvez trouver comment l'installer sur la page GitHub de jsmind ou l'installer via npm.

Ensuite, nous créons un composant Vue pour héberger la carte mentale. Dans le modèle, nous pouvons utiliser <div id="jsmind_container"></div> pour créer un conteneur. <div id="jsmind_container"></div>来创建一个容器。

<template>
  <div id="jsmind_container"></div>
</template>

在Vue的生命周期方法中，我们可以实例化jsmind，并将其挂载到容器上。同时，我们可以定义一个节点样式对象和一个皮肤样式对象，用于节点样式的自定义和皮肤切换。

<script>
import jsMind from 'jsmind'
import 'jsmind/style/jsmind.css'

export default {
  mounted() {
    const container = document.getElementById('jsmind_container')
    const options = {
      theme: 'default', // 初始皮肤
      container,
      editable: true,
      shortcut: { enable: false }
    }
    const jm = new jsMind(options)

    // 自定义节点样式
    const topicStyles = {
      root: { background: '#FFCC99' },
      business: { background: '#66CCFF' },
      development: { background: '#66FF99' },
      design: { background: '#FF99CC' }
    }

    // 皮肤切换
    const skinStyles = {
      default: {},
      dark: { background: '#333', color: '#fff' },
      light: { background: '#fff', color: '#333' },
      blue: { background: '#66CCFF', color: '#fff' }
    }

    jm.add_theme('custom', topicStyles)
    jm.add_theme('skins', skinStyles)

    jm.init()
    jm.show()
    this.jm = jm
  }
}
</script>

在上述代码中，我们首先引入了jsmind和相应的样式文件。然后，在mounted生命周期方法中，我们初始化了jsmind实例，并将其挂载到jsmind_container上。我们还定义了topicStyles和skinStyles两个对象，分别用于自定义节点样式和实现皮肤切换。通过jm.add_theme方法，我们将这两个对象分别命名为custom和skins主题，并将其添加到jsmind中。最后，调用jm.init()方法和jm.show()方法来初始化思维导图并展示出来。

在模板中，我们可以通过定义节点的style属性来应用自定义的节点样式。

<template>
  <div id="jsmind_container"></div>
</template>

<script>
export default {
  mounted() {
    // 省略其他内容...
    const options = {
      // 省略其他配置...
      mode: 'full',
      default_event_handle: {
        enable_mousedown_handle: false
      },
      event_handle: {
        click_element_handle: (el) => {
          this.handleNodeClick(el)
        },
        mouse_over_handle: (el) => {
          this.handleNodeHover(el)
        },
        mouse_leave_handle: () => {
          this.handleNodeLeave()
        }
      }
    }

    // 省略其他内容...
  },
  methods: {
    handleNodeClick(el) {
      const nodeId = el.getAttribute('nodeid')
      const nodeData = this.jm.get_node(nodeId)
      // 处理节点点击事件...
    },
    handleNodeHover(el) {
      const nodeId = el.getAttribute('nodeid')
      const nodeData = this.jm.get_node(nodeId)
      // 处理节点悬停事件...
    },
    handleNodeLeave() {
      // 处理节点离开事件...
    }
  }
}
</script>

在上述代码中，我们在配置选项中添加了event_handle属性，并定义了click_element_handle、mouse_over_handle和mouse_leave_handlerrreee

Dans la méthode du cycle de vie de Vue, nous pouvons instancier jsmind et le monter sur le conteneur. Dans le même temps, nous pouvons définir un objet de style de nœud et un objet de style d'habillage pour la personnalisation du style de nœud et le changement d'habillage.

rrreee

Dans le code ci-dessus, nous avons d'abord présenté jsmind et les fichiers de style correspondants. Ensuite, dans la méthode du cycle de vie monté, nous initialisons l'instance jsmind et la montons sur jsmind_container. Nous avons également défini deux objets : topicStyles et skinStyles, qui sont utilisés respectivement pour personnaliser les styles de nœuds et implémenter le changement d'apparence. Grâce à la méthode jm.add_theme, nous nommons respectivement ces deux objets thèmes custom et skins, et les ajoutons à jsmind. Enfin, appelez la méthode jm.init() et la méthode jm.show() pour initialiser la carte mentale et l'afficher. 🎜🎜Dans le modèle, nous pouvons appliquer des styles de nœuds personnalisés en définissant l'attribut style du nœud. 🎜rrreee🎜Dans le code ci-dessus, nous avons ajouté l'attribut event_handle dans les options de configuration et défini click_element_handle, mouse_over_handle et mouse_leave_handle code>, répondent respectivement aux événements de clic, de survol et de sortie du nœud. 🎜🎜Grâce aux exemples de code ci-dessus, nous avons complété la fonction d'utilisation de Vue et jsmind pour personnaliser le style de nœud et le changement de skin de la carte mentale. Vous pouvez modifier davantage le style de nœud personnalisé et les objets de style d'habillage en fonction des besoins réels pour obtenir différents styles de nœuds et effets d'habillage. 🎜

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!