Wie implementiert man die Funktionen zum Kopieren und Ausschneiden von Knoten von Mind Maps über Vue und jsmind?

Wie implementiert man die Knotenkopier- und Ausschneidefunktion der Mind Map über Vue und jsmind?

Mind Map ist ein gängiges Denkwerkzeug, das uns helfen kann, unsere Gedanken zu ordnen und unsere Denklogik zu ordnen. Die Funktionen zum Kopieren und Ausschneiden von Knoten sind häufig verwendete Vorgänge in Mind Maps, mit denen wir vorhandene Knoten bequemer wiederverwenden und die Effizienz der Denkorganisation verbessern können.

In diesem Artikel werden wir die beiden Tools Vue und jsmind verwenden, um die Funktionen zum Kopieren und Ausschneiden von Knoten der Mind Map zu implementieren. Zuerst müssen wir Vue und jsmind installieren und eine Vue-Anwendung erstellen.

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

Vue.config.productionTip = false

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

Als nächstes müssen wir jsmind in die Vue-Anwendung laden und eine Instanz der Mind Map erstellen.

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

Im obigen Code initialisieren wir eine jsmind-Instanz im bereitgestellten Lebenszyklus der Vue-Komponente und laden die anfänglichen Mindmap-Daten. copyNode方法实现了节点的复制功能，通过Object.assign复制选中节点的数据，生成一个新的节点，并将其添加到选中节点的父节点下；cutNode方法实现了节点的剪切功能，通过mind.remove_nodeEntfernen Sie den ausgewählten Knoten, erweitern Sie den übergeordneten Knoten und wählen Sie den übergeordneten Knoten aus.

Auf der Seite klicken wir auf die Schaltflächen „Knoten kopieren“ und „Knoten ausschneiden“, um die entsprechenden Funktionen zu implementieren.

Durch die obigen Codebeispiele haben wir die Funktionen zum Kopieren und Ausschneiden von Knoten der Mind Map erfolgreich über Vue und jsmind implementiert. Auf diese Weise können wir unsere Gedanken einfacher ordnen und Mindmaps erstellen. Gleichzeitig können wir durch gründliches Studium und Praxis von Vue und jsmind auch die Fähigkeiten der Front-End-Entwicklung weiter beherrschen. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonWie implementiert man die Funktionen zum Kopieren und Ausschneiden von Knoten von Mind Maps über Vue und jsmind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!