cari
Rumahhujung hadapan webView.jsBagaimana untuk menggunakan Vue dan jsmind untuk melaksanakan sauh nod dan kawalan sambungan peta minda?

Bagaimana untuk menggunakan Vue dan jsmind untuk melaksanakan sauh nod dan kawalan sambungan peta minda?

Gunakan Vue dan Jsmind untuk merealisasikan node sauh dan kawalan sambungan peta minda

introduction

mind adalah alat yang biasa digunakan untuk berfikir dan menganjurkan maklumat. . Melaksanakan fungsi peta minda dalam aplikasi web boleh membantu pengguna mengatur dan mengurus idea mereka dengan lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan perpustakaan Vue dan jsmind untuk merealisasikan titik penambat nod dan kawalan sambungan peta minda.

Gunakan Vue untuk mencipta komponen asas peta minda

Untuk menggunakan fungsi peta minda dengan mudah, kita boleh mencipta komponen asas peta minda. Pertama, kita perlu memasang perpustakaan jsmind dalam projek Vue. Ia boleh dipasang melalui arahan berikut:

npm install jsmind --save

Kemudian, perkenalkan perpustakaan dan gaya jsmind ke dalam komponen Vue, dan cipta elemen <div> untuk memaparkan peta minda. Kod tersebut adalah seperti berikut: <code><div>元素,用于渲染思维导图。代码如下所示:<pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div ref=&quot;mindContainer&quot;&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; import 'jsmind/style/jsmind.css' import jsMind from 'jsmind' export default { name: 'MindMap', mounted() { this.initMindMap() }, methods: { initMindMap() { var mind = { /* 在这里定义思维导图的数据 */ } var options = { container: this.$refs.mindContainer, editable: true, // 是否可以编辑节点 theme: 'default' } new jsMind(options).show(mind) } } } &lt;/script&gt; &lt;style scoped&gt; .mind-container { width: 100%; height: 100%; } &lt;/style&gt;</pre><p>通过以上代码,我们创建了一个<code>MindMap组件,并在其中引入了jsmind库,并初始化了一个思维导图实例。现在我们可以在Vue项目中使用该组件,并查看基本的思维导图显示效果。

实现节点锚点和连线控制

为了实现节点锚点和连线控制的功能,我们需要在每个节点中添加一个按钮,用于控制锚点的显示和隐藏,并在节点中添加事件监听器,用于完成连线的操作。

首先,我们可以在initMindMap方法中获取所有的节点,并为每个节点添加按钮元素。代码如下:

initMindMap() {
  // ...
  this.$refs.mindContainer.addEventListener('mousedown', (event) => {
    var target = event.target
    if (target.classList.contains('expanded')) {
      // 当前节点已经展开,不进行操作
      return
    }
    if (target.tagName === 'jmnode') {
      var node = target.jmnode
      var button = document.createElement('button')
      button.classList.add('anchor-button')
      button.innerText = '连线'
      button.addEventListener('click', () => {
        this.startConnect(node)
      })
      target.append(button)
    }
  })
}

在以上代码中,我们通过event.target获取当前点击的元素,如果该元素为jmnode(即思维导图的节点元素),则为该节点创建一个按钮,并向按钮添加click事件监听器。

接下来,我们可以为每个节点添加连线的操作。

首先,我们需要添加两个响应连线的节点的临时变量,用于记录这两个节点是否已选择。代码如下:

data() {
  return {
    // ...
    selectedNode1: null,
    selectedNode2: null
  }
}

然后,我们可以添加一个startConnect方法,并在该方法中根据点击的节点选择是否进行连线。代码如下:

methods: {
  startConnect(node) {
    if (!this.selectedNode1) {
      this.selectedNode1 = node
    } else if (!this.selectedNode2) {
      this.selectedNode2 = node
      this.connectNodes(this.selectedNode1, this.selectedNode2)
      this.selectedNode1 = null
      this.selectedNode2 = null
    }
  },
  connectNodes(node1, node2) {
    // 在这里实现连线的逻辑
  }
}

在以上代码中,当点击一个节点时,如果selectedNode1为空,则将该节点赋值给selectedNode1;如果selectedNode1不为空且selectedNode2为空,则将该节点赋值给selectedNode2,并调用connectNodes方法进行节点连线的逻辑;最后,在连线完成后,将selectedNode1selectedNode2重新赋值为空。

connectNodes方法中,我们可以使用jsmind提供的API方法将两个节点进行连线。代码如下:

connectNodes(node1, node2) {
  var mindData = this.mind.data
  var nodeData1 = mindData.getNodeData(node1.id)
  var nodeData2 = mindData.getNodeData(node2.id)
  if (!nodeData1 || !nodeData2) {
    return
  }
  var edgeId = '__connect_edge_' + node1.id + '_' + node2.id
  if (mindData.getLinkData(edgeId)) {
    return
  }
  var linkData = {
    id: edgeId,
    src: node1.id,
    target: node2.id
  }
  mindData.addLinkData(linkData)
  this.mind.show(mindData)
}

在以上代码中,我们首先获取思维导图的数据对象mindData,通过它的getNodeData方法获取待连线的两个节点的数据;然后,通过一个唯一的ID创建一个连线的数据对象linkData,并通过addLinkData方法将连线数据添加到mindData中;最后,通过showrrreee

Melalui kod di atas, kami mencipta komponen MindMap, memperkenalkan perpustakaan jsmind ke dalamnya dan memulakan contoh peta minda. Kini kita boleh menggunakan komponen ini dalam projek Vue dan melihat kesan paparan peta minda asas.

Laksanakan titik anchor nod dan kawalan sambungan

Untuk merealisasikan fungsi titik anchor nod dan kawalan sambungan, kita perlu menambah butang pada setiap nod untuk mengawal paparan dan penyembunyian titik anchor, dan menambah Event listener, digunakan untuk menyelesaikan operasi sambungan.

Pertama, kita boleh mendapatkan semua nod dalam kaedah initMindMap dan menambah elemen butang pada setiap nod. Kodnya adalah seperti berikut:

rrreee

Dalam kod di atas, kami mendapat elemen yang sedang diklik melalui event.target, jika elemen itu ialah jmnode (iaitu, nod elemen peta minda), buat butang untuk nod dan tambahkan pendengar acara klik pada butang. 🎜🎜Seterusnya, kami boleh menambah operasi sambungan pada setiap nod. 🎜🎜Pertama, kita perlu menambah dua pembolehubah sementara yang bertindak balas kepada nod yang disambungkan untuk merekodkan sama ada kedua-dua nod ini telah dipilih. Kodnya adalah seperti berikut: 🎜rrreee🎜 Kemudian, kita boleh menambah kaedah startConnect, dan dalam kaedah ini pilih sama ada untuk menyambung berdasarkan nod yang diklik. Kodnya adalah seperti berikut: 🎜rrreee🎜Dalam kod di atas, apabila nod diklik, jika selectedNode1 kosong, nod akan diberikan kepada selectedNode1 jika selectedNode1 tidak kosong dan <code>selectedNode2 kosong, kemudian tetapkan nod kepada selectedNode2 dan panggil kaedah connectNodes untuk melaksanakan sambungan nod logik ; Akhir sekali, selepas sambungan selesai, tetapkan semula selectedNode1 dan selectedNode2 untuk mengosongkan. 🎜🎜Dalam kaedah connectNodes, kita boleh menggunakan kaedah API yang disediakan oleh jsmind untuk menyambungkan dua nod. Kodnya adalah seperti berikut: 🎜rrreee🎜Dalam kod di atas, kami mula-mula mendapatkan objek data mindData peta minda dan mendapatkan dua nod untuk disambungkan melalui getNodeData kaedah data; kemudian, buat objek data yang disambungkan <code>linkData dengan ID unik dan tambahkan data sambungan ke mindData melalui kaedah addLinkData dalam; akhirnya, kemas kini paparan contoh peta minda melalui kaedah show. 🎜🎜Pada ketika ini, kami telah menyelesaikan pelaksanaan fungsi titik penambat nod dan kawalan sambungan peta minda. Apabila menggunakan komponen peta minda ini, pengguna boleh mengklik butang pada nod untuk memilih titik permulaan dan titik akhir sambungan, dan mewujudkan perkaitan antara nod melalui operasi sambungan. 🎜🎜Ringkasan🎜🎜Melalui pengenalan artikel ini, kami telah mempelajari cara menggunakan perpustakaan Vue dan jsmind untuk melaksanakan titik penambat nod dan kawalan sambungan peta minda. Kami mula-mula mencipta komponen peta minda asas dan melaksanakan fungsi paparan peta minda melalui perpustakaan jsmind kemudian, kami menambah elemen butang pada setiap nod dan menambah pendengar acara klik untuk butang untuk kawalan Paparan dan sembunyikan titik utama; operasi sambungan nod, dan pengguna boleh memilih titik permulaan dan titik akhir sambungan dengan mengklik butang nod. 🎜🎜Saya harap artikel ini akan membantu anda dalam melaksanakan titik penambat nod dan kawalan sambungan peta minda dalam Vue dan jsmind Jika anda mempunyai kaedah pelaksanaan yang lebih baik atau lebih banyak keperluan berfungsi, sila tinggalkan mesej untuk berkomunikasi. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue dan jsmind untuk melaksanakan sauh nod dan kawalan sambungan peta minda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Vue.js: Menentukan peranannya dalam pembangunan webVue.js: Menentukan peranannya dalam pembangunan webApr 18, 2025 am 12:07 AM

Peranan vue.js dalam pembangunan web adalah bertindak sebagai rangka kerja JavaScript yang progresif yang memudahkan proses pembangunan dan meningkatkan kecekapan. 1) Ia membolehkan pemaju memberi tumpuan kepada logik perniagaan melalui pengikatan data yang responsif dan pembangunan komponen. 2) Prinsip kerja Vue.js bergantung kepada sistem responsif dan DOM maya untuk mengoptimumkan prestasi. 3) Dalam projek sebenar, adalah amalan biasa untuk menggunakan VUEX untuk menguruskan keadaan global dan mengoptimumkan respons data.

Memahami Vue.js: Terutama rangka kerja frontendMemahami Vue.js: Terutama rangka kerja frontendApr 17, 2025 am 12:20 AM

Vue.js adalah kerangka JavaScript yang progresif yang dikeluarkan oleh You Yuxi pada tahun 2014 untuk membina antara muka pengguna. Kelebihan terasnya termasuk: 1. Pengikatan data responsif, Paparan Kemas Kini Automatik Perubahan Data; 2. Pembangunan komponen, UI boleh dibahagikan kepada komponen bebas dan boleh diguna semula.

Frontend Netflix: Contoh dan Aplikasi React (atau Vue)Frontend Netflix: Contoh dan Aplikasi React (atau Vue)Apr 16, 2025 am 12:08 AM

Netflix menggunakan React sebagai kerangka depannya. 1) Model pembangunan komponen React dan ekosistem yang kuat adalah sebab utama mengapa Netflix memilihnya. 2) Melalui komponen, Netflix memisahkan antara muka kompleks ke dalam ketulan yang boleh diurus seperti pemain video, senarai cadangan dan komen pengguna. 3) Kitaran Hayat DOM dan Komponen Maya React mengoptimumkan kecekapan rendering dan pengurusan interaksi pengguna.

Landskap Frontend: Bagaimana Netflix menghampiri pilihannyaLandskap Frontend: Bagaimana Netflix menghampiri pilihannyaApr 15, 2025 am 12:13 AM

Pilihan Netflix dalam teknologi front-end terutamanya memberi tumpuan kepada tiga aspek: pengoptimuman prestasi, skalabilitas dan pengalaman pengguna. 1. Pengoptimuman Prestasi: Netflix memilih React sebagai kerangka utama dan alat yang dibangunkan seperti SpeedCurve dan Boomerang untuk memantau dan mengoptimumkan pengalaman pengguna. 2. Skalabiliti: Mereka mengamalkan seni bina front-end mikro, memisahkan aplikasi ke dalam modul bebas, meningkatkan kecekapan pembangunan dan skalabilitas sistem. 3. Pengalaman Pengguna: Netflix menggunakan perpustakaan komponen bahan-UI untuk terus mengoptimumkan antara muka melalui ujian A/B dan maklum balas pengguna untuk memastikan konsistensi dan estetika.

React vs Vue: Rangka kerja mana yang digunakan oleh Netflix?React vs Vue: Rangka kerja mana yang digunakan oleh Netflix?Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkcalled "gibbon" Builtonreact, notreactorsvuedirectly.1) TeamExperience: chectionBasedOnfamiliarity.2) ProjectOplePlexity: VueforsImplerProjects, ReactForComplexones.3)

Pilihan Rangka Kerja: Apa yang mendorong keputusan Netflix?Pilihan Rangka Kerja: Apa yang mendorong keputusan Netflix?Apr 13, 2025 am 12:05 AM

Netflix terutamanya menganggap prestasi, skalabiliti, kecekapan pembangunan, ekosistem, hutang teknikal dan kos penyelenggaraan dalam pemilihan rangka kerja. 1. Prestasi dan Skalabiliti: Java dan Springboot dipilih untuk memproses data besar -besaran dan permintaan serentak yang tinggi. 2. Kecekapan Pembangunan dan Ekosistem: Gunakan React untuk meningkatkan kecekapan pembangunan front-end dan menggunakan ekosistemnya yang kaya. 3. Hutang Teknikal dan Penyelenggaraan Kos: Pilih Node.js untuk membina mikroservis untuk mengurangkan kos penyelenggaraan dan hutang teknikal.

React, Vue, dan Masa Depan Frontend NetflixReact, Vue, dan Masa Depan Frontend NetflixApr 12, 2025 am 12:12 AM

Netflix terutamanya menggunakan React sebagai rangka kerja front-end, ditambah dengan VUE untuk fungsi tertentu. 1) Komponen React dan DOM maya meningkatkan prestasi dan kecekapan pembangunan aplikasi Netflix. 2) VUE digunakan dalam alat dalaman dan projek kecil Netflix, dan fleksibiliti dan kemudahan penggunaannya adalah kunci.

Vue.js di frontend: aplikasi dan contoh dunia nyataVue.js di frontend: aplikasi dan contoh dunia nyataApr 11, 2025 am 12:12 AM

Vue.js adalah rangka kerja JavaScript yang progresif yang sesuai untuk membina antara muka pengguna yang kompleks. 1) Konsep terasnya termasuk data responsif, komponen dan DOM maya. 2) Dalam aplikasi praktikal, ia boleh ditunjukkan dengan membina aplikasi todo dan mengintegrasikan vuerouter. 3) Apabila debugging, disyorkan untuk menggunakan Vuedevtools dan Console.log. 4) Pengoptimuman prestasi boleh dicapai melalui V-IF/V-Show, senarai pengoptimuman rendering, pemuatan asynchronous komponen, dll.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)