vue使用jsMind思維導(dǎo)圖的實戰(zhàn)指南
前言
jsMind 是一個顯示/編輯思維導(dǎo)圖的純 javascript 類庫，其基于 html5 的 canvas 進行設(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 找到這個使用修改寬度和高度的方法進行重構(gòu)！！
;(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)文章
前端構(gòu)建工具Webpack、Vite區(qū)別有哪些
Webpack和Vite是兩種主流的前端構(gòu)建工具,它們在功能、性能和使用場景上有所不同,Webpack提供豐富的功能和配置,適合大型復(fù)雜項目,但可能導(dǎo)致啟動和構(gòu)建速度較慢,Vite基于ES模塊,支持快速的熱替換,適合小型或中等項目,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue3移動端嵌入pdf的多種方法小結(jié),使用embed嵌入有好處也有缺點,本文給大家講解的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了element ScrollBar滾動組件源碼深入分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細介紹了vue3組合式API獲取子組件屬性和方法的代碼實例,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue?scss后綴文件background-image路徑錯誤的解決
這篇文章主要介紹了vue?scss后綴文件background-image路徑錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要給大家介紹了在vue中如何通過iframe方式加載本地的vue頁面的解決方法，文中有詳細的解決流程,需要的朋友可以參考下2023-06-06
vue使用mpegts.js實現(xiàn)播放flv的直播視頻流
這篇文章主要為大家詳細介紹了vue如何使用mpegts.js實現(xiàn)播放flv的直播視頻流,文中的示例代碼講解詳細,有需要的小伙伴可以參考一下2024-01-01
這篇文章主要介紹了vue事件處理原理及過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03
Vue.js中輕松解決v-for執(zhí)行出錯的三個方案
v-for標(biāo)簽可以用來遍歷數(shù)組，將數(shù)組的每一個值綁定到相應(yīng)的視圖元素中去，下面這篇文章主要給大家介紹了關(guān)于在Vue.js中輕松解決v-for執(zhí)行出錯的三個方案，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
vue3組件的v-model:value與v-model的區(qū)別解析
在Vue3中,v-model和v-model:value都是用于實現(xiàn)雙向數(shù)據(jù)綁定的語法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認行為、靈活性、多模型綁定和使用場景,感興趣的朋友一起看看吧2025-02-02