Comment implémenter les fonctions de copie et de coupure de nœuds des cartes mentales via Vue et jsmind ?

Comment implémenter la fonction de copie et de coupe de nœuds de la carte mentale via Vue et jsmind ?

La carte mentale est un outil de réflexion courant qui peut nous aider à organiser nos pensées et à trier notre logique de pensée. Les fonctions de copie et de coupure de nœuds sont des opérations couramment utilisées dans les cartes mentales, qui nous permettent de réutiliser plus facilement les nœuds existants et d'améliorer l'efficacité de l'organisation de la réflexion.

Dans cet article, nous utiliserons les deux outils Vue et jsmind pour implémenter les fonctions de copie et de coupe de nœuds de la carte mentale. Tout d’abord, nous devons installer Vue et jsmind et créer une application Vue.

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Ensuite, nous devons charger jsmind dans l'application Vue et créer une instance de la carte mentale.

<template>
  <div>
    <div id="jsmind_container"></div>
    <button @click="copyNode">复制节点</button>
    <button @click="cutNode">剪切节点</button>
  </div>
</template>

<script>
import jsMind from 'jsmind'

export default {
  mounted() {
    this.initMind()
  },

  methods: {
    initMind() {
      const mind = {
        // 思维导图的数据
        data: [
          { id: 'root', isroot: true, topic: '思维导图' },
          { id: 'node1', parentid: 'root', topic: '节点1' },
          { id: 'node2', parentid: 'root', topic: '节点2' },
          { id: 'node3', parentid: 'root', topic: '节点3' }
        ]
      }

      this.mind = new jsMind({
        container: 'jsmind_container',
        editable: true
      })

      this.mind.show(mind)
    },
    
    copyNode() {
      const selectedNode = this.mind.get_selected_node()
      if (selectedNode) {
        const newNode = Object.assign({}, selectedNode.data) // 复制节点数据
        newNode.id = 'node' + (new Date().getTime()) // 生成新的节点id
        this.mind.add_node(selectedNode.parent, newNode) // 将新节点添加到选中节点的父节点下
      }
    },
    
    cutNode() {
      const selectedNode = this.mind.get_selected_node()
      if (selectedNode) {
        const parentNode = this.mind.get_node(selectedNode.parent)
        this.mind.remove_node(selectedNode) // 移除选中节点
        parentNode.expand = true // 展开父节点
        this.mind.select_node(parentNode.id) // 选中父节点
      }
    }
  }
}
</script>

Dans le code ci-dessus, nous initialisons une instance jsmind dans le cycle de vie monté du composant Vue et chargeons les données initiales de la carte mentale. copyNode方法实现了节点的复制功能，通过Object.assign复制选中节点的数据，生成一个新的节点，并将其添加到选中节点的父节点下；cutNode方法实现了节点的剪切功能，通过mind.remove_nodeSupprimez le nœud sélectionné, développez le nœud parent et sélectionnez le nœud parent.

Sur la page, nous cliquons sur les boutons "Copier le nœud" et "Couper le nœud" pour implémenter les fonctions correspondantes.

Grâce aux exemples de code ci-dessus, nous avons implémenté avec succès les fonctions de copie et de coupe de nœuds de la carte mentale via Vue et jsmind. De cette façon, nous pouvons organiser nos pensées et construire des cartes mentales plus facilement. Dans le même temps, grâce à une étude et une pratique approfondies de Vue et jsmind, nous pouvons également maîtriser davantage les compétences du développement front-end. J'espère que cet article vous aidera !

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!