vue使用jsMind思維導(dǎo)圖的實戰(zhàn)指南
前言
jsMind 是一個顯示/編輯思維導(dǎo)圖的純 javascript 類庫，其基于 html5 的 canvas 進(jìn)行設(shè)計。
我們使用它可能需要在網(wǎng)頁上單純的使用這種圖樣的效果，而其他交互卻是自定義的，我這邊選擇的是jsMind 與 網(wǎng)上的一個jsmind.menu.js（右鍵菜單）。
開始
安裝
npm i jsmind --save
使用
import 'jsmind/style/jsmind.css'
import jsMind from 'jsmind/js/jsmind.js'
window.jsMind = jsMind
const { init, reBuild } = require('./jsmind.menu.js')
const { resetMind } = require('./jsResetMind.js')
init(jsMind)
resetMind(jsMind)
...
注： 常規(guī)用法看網(wǎng)上jsMind。
實例修改
在使用jsMind感覺有一些問題（不知道是不是我這邊電腦的問題）以及滿足我的需求做了一些改變。
隱藏和打開樣式居下
處理方式（增加樣式）：
// 讓其居中
jmexpander {
display: flex;
justify-content: center;
align-items: center;
}
隱藏和打開 滑動條有問題
處理方式（重構(gòu)內(nèi)部方法）：
打開 https://gitee.com/314079846/jsmind/blob/master/js/jsmind.js 找到這個使用修改寬度和高度的方法進(jìn)行重構(gòu)?。?/p>
;(function ($w, mind) {
var Jm = $w[mind]
Jm.view_provider.prototype.expand_size = function () {
var min_size = this.layout.get_min_size()
var min_width = min_size.w + this.opts.hmargin * 2
var min_height = min_size.h + this.opts.vmargin * 2
// 修改這里 每一個大概減去20左右
var client_w = this.e_panel.clientWidth - 20
var client_h = this.e_panel.clientHeight - 20
if (client_w < min_width) {
client_w = min_width
}
if (client_h < min_height) {
client_h = min_height
}
this.size.w = client_w
this.size.h = client_h
}
if (typeof module !== 'undefined' && typeof exports === 'object') {
module.exports = {
resetMind: function (opt) {
Jm = opt
},
}
}
})(window, 'jsMind')
jsmind.menu.js 中 增加自定義菜單并自定義函數(shù)
jsmind.menu.js 中 尋找到定義menu的地方，增加custom自定義屬性
注： 自定義的東西肯定需要自定義一個類型或者唯一性的key，讓代碼知道我點擊的是哪一個，所以還需要處理點擊事件。
jsmind.menu.js 中 增加 菜單點擊事件自定義
尋找對應(yīng)點擊事件_create_menu_item 與 _get_injectionList.
在里面增加key屬性。
即：
后面使用方式（options）：
每一個節(jié)點樣式根據(jù)節(jié)點數(shù)據(jù)變化的
目前的jsMind是設(shè)置了主題，不過是不滿足我的需求，還有每一個節(jié)點的樣式設(shè)置了常用的background、width等，需要自己的話得重構(gòu)設(shè)置style方法
在里面添加自己需要的樣式。
節(jié)點鼠標(biāo)右鍵位置
鼠標(biāo)大概在紅圈位置右鍵，放大縮小的時候會位置有問題。
解決方式：
jsmind.menu.js中修改menuStl增加布局樣式 'transform-origin': '0 0'
每個節(jié)點對應(yīng)不同的菜單
目前插件是統(tǒng)一每一個是一樣的menu。
修改方式：
- 每一個節(jié)點可定義一個dataClass 屬性，不寫是未定義不顯示任何菜單，名字自定義取
- 對應(yīng)的menu中的injectionList數(shù)組增加dataClass屬性
- jsmind.menu.js中_event_contextMenu方法修改每一個menu-item的樣式是否顯示，同時_create_menu_item方法增加menuItem的class。
放大縮小數(shù)據(jù)多了左邊會顯示不出來
看圖：
解決方式：
setZoom方法
Jm.view_provider.prototype.setZoom = function (zoom) {
if (zoom < this.minZoom || zoom > this.maxZoom) {
return false
}
this.actualZoom = zoom
for (var i = 0; i < this.e_panel.children.length; i++) {
this.e_panel.children[i].style.transform = 'scale(' + zoom + ')'
this.e_panel.children[i].parentNode.style['padding-left'] = (zoom * this.e_panel.children[i].parentNode.clientWidth - this.e_panel.children[i].parentNode.clientWidth) / 2 + 'px'
// this.e_panel.children[i].style['transform-origin'] = '0 0'
}
this.show(true)
return true
}
第一種： 增加 paddingLeft樣式
this.e_panel.children[i].parentNode.style['padding-left'] = (zoom * this.e_panel.children[i].parentNode.clientWidth - this.e_panel.children[i].parentNode.clientWidth) / 2 + 'px'
第二種： 設(shè)置 transform-origin
this.e_panel.children[i].style['transform-origin'] = '0 0'
實現(xiàn)效果
demo效果
總結(jié)
為了實現(xiàn)我的效果，又不太想用龐大的組件和插件，jsMind是非常合適的選擇，可重構(gòu)、可擴展。感謝jsMind和jsmind.menu.js的分享者！
參考 jsMind（https://gitee.com/314079846/jsmind/tree/master）
到此這篇關(guān)于vue使用jsMind思維導(dǎo)圖的文章就介紹到這了,更多相關(guān)vue使用jsMind思維導(dǎo)圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文將演示如何使用Vue?3實現(xiàn)一個簡單的密碼強度檢測功能,通過實時反饋,幫助用戶創(chuàng)建更安全的密碼,從而提升整體系統(tǒng)的安全性,需要的朋友可以參考下2024-06-06
uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動效果
這篇文章主要介紹了uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動效果,實現(xiàn)步驟和思路都很簡單，今天通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11![警告[vue-router]?Duplicate?named?routes?definition簡單解決方法](http://img.jbzj.com/images/xgimg/bcimg2.png)
警告[vue-router]?Duplicate?named?routes?definition簡單解決方法
這篇文章主要關(guān)于介紹了警告[vue-router]?Duplicate?named?routes?definition的解決方法,這個錯誤提示是因為在Vue Router中定義了重復(fù)的路由名稱,需要的朋友可以參考下2023-12-12
虛擬dom是當(dāng)前前端最流行的兩個框架（vue和react）都用到的一種技術(shù),都說他能幫助vue和react提升渲染性能,提升用戶體驗,下面這篇文章主要給大家介紹了關(guān)于Vue3組件更新中的DOM?diff算法的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要給大家介紹了關(guān)于vue3獲取、設(shè)置元素高度的相關(guān)資料,小編通過實際案例向大家展示操作過程,操作方法簡單易懂,需要的朋友可以參考下2024-08-08
這篇文章給大家介紹了vue組件創(chuàng)建和傳值的方法，創(chuàng)建組件有三種方法，文中給大家介紹的非常詳細(xì)，父組件傳值給子組件的方法，給大家介紹的也非常詳細(xì)，需要的朋友參考下吧2018-08-08
Vue封裝組件利器之$attrs、$listeners的使用
vue通信手段有很多種,props/emit、vuex、event bus、provide/inject等,還有一種通信方式,那就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于Vue封裝組件利器之$attrs、$listeners使用的相關(guān)資料,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue.js高德地圖實現(xiàn)熱點圖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue中axios的get請求和post請求的傳參方式、攔截器示例代碼
Post是向服務(wù)器提交數(shù)據(jù)的一種請求,get是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請求,post在真正接受數(shù)據(jù)之前會先將請求頭發(fā)送給服務(wù)器進(jìn)行確認(rèn),然后才真正發(fā)送數(shù)據(jù),本文給大家介紹vue中axios的get請求和post請求的傳參方式、攔截器示例代碼,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了淺談vue單頁面中有多個echarts圖表時的公用代碼寫法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07