vue使用jsMind思維導(dǎo)圖的實(shí)戰(zhàn)指南
前言
jsMind 是一個(gè)顯示/編輯思維導(dǎo)圖的純 javascript 類庫(kù),其基于 html5 的 canvas 進(jìn)行設(shè)計(jì)。
我們使用它可能需要在網(wǎng)頁(yè)上單純的使用這種圖樣的效果,而其他交互卻是自定義的,我這邊選擇的是jsMind 與 網(wǎng)上的一個(gè)jsmind.menu.js
(右鍵菜單)。
開(kāi)始
安裝
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。
實(shí)例修改
在使用jsMind感覺(jué)有一些問(wèn)題(不知道是不是我這邊電腦的問(wèn)題)以及滿足我的需求做了一些改變。
隱藏和打開(kāi)樣式居下
處理方式(增加樣式):
// 讓其居中 jmexpander { display: flex; justify-content: center; align-items: center; }
隱藏和打開(kāi) 滑動(dòng)條有問(wèn)題
處理方式(重構(gòu)內(nèi)部方法):
打開(kāi) https://gitee.com/314079846/jsmind/blob/master/js/jsmind.js
找到這個(gè)使用修改寬度和高度的方法進(jìn)行重構(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 // 修改這里 每一個(gè)大概減去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
自定義屬性
注: 自定義的東西肯定需要自定義一個(gè)類型或者唯一性的key,讓代碼知道我點(diǎn)擊的是哪一個(gè),所以還需要處理點(diǎn)擊事件。
jsmind.menu.js 中 增加 菜單點(diǎn)擊事件自定義
尋找對(duì)應(yīng)點(diǎn)擊事件_create_menu_item
與 _get_injectionList
.
在里面增加key屬性。
即:
后面使用方式(options):
每一個(gè)節(jié)點(diǎn)樣式根據(jù)節(jié)點(diǎn)數(shù)據(jù)變化的
目前的jsMind是設(shè)置了主題,不過(guò)是不滿足我的需求,還有每一個(gè)節(jié)點(diǎn)的樣式設(shè)置了常用的background
、width
等,需要自己的話得重構(gòu)設(shè)置style方法
在里面添加自己需要的樣式。
節(jié)點(diǎn)鼠標(biāo)右鍵位置
鼠標(biāo)大概在紅圈位置右鍵,放大縮小的時(shí)候會(huì)位置有問(wèn)題。
解決方式:
jsmind.menu.js
中修改menuStl
增加布局樣式 'transform-origin': '0 0'
每個(gè)節(jié)點(diǎn)對(duì)應(yīng)不同的菜單
目前插件是統(tǒng)一每一個(gè)是一樣的menu。
修改方式:
- 每一個(gè)節(jié)點(diǎn)可定義一個(gè)dataClass 屬性,不寫(xiě)是未定義不顯示任何菜單,名字自定義取
- 對(duì)應(yīng)的menu中的injectionList數(shù)組增加dataClass屬性
- jsmind.menu.js中_event_contextMenu方法修改每一個(gè)menu-item的樣式是否顯示,同時(shí)_create_menu_item方法增加menuItem的class。
放大縮小數(shù)據(jù)多了左邊會(huì)顯示不出來(lái)
看圖:
解決方式:
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'
實(shí)現(xiàn)效果
demo效果
總結(jié)
為了實(shí)現(xiàn)我的效果,又不太想用龐大的組件和插件,jsMind
是非常合適的選擇,可重構(gòu)、可擴(kuò)展。感謝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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3實(shí)現(xiàn)檢測(cè)密碼強(qiáng)度值功能
本文將演示如何使用Vue?3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的密碼強(qiáng)度檢測(cè)功能,通過(guò)實(shí)時(shí)反饋,幫助用戶創(chuàng)建更安全的密碼,從而提升整體系統(tǒng)的安全性,需要的朋友可以參考下2024-06-06uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果
這篇文章主要介紹了uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果,實(shí)現(xiàn)步驟和思路都很簡(jiǎn)單,今天通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11警告[vue-router]?Duplicate?named?routes?definition簡(jiǎn)單解決方法
這篇文章主要關(guān)于介紹了警告[vue-router]?Duplicate?named?routes?definition的解決方法,這個(gè)錯(cuò)誤提示是因?yàn)樵赩ue Router中定義了重復(fù)的路由名稱,需要的朋友可以參考下2023-12-12Vue封裝組件利器之$attrs、$listeners的使用
vue通信手段有很多種,props/emit、vuex、event bus、provide/inject等,還有一種通信方式,那就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于Vue封裝組件利器之$attrs、$listeners使用的相關(guān)資料,需要的朋友可以參考下2021-12-12vue.js高德地圖實(shí)現(xiàn)熱點(diǎn)圖代碼實(shí)例
這篇文章主要介紹了vue.js高德地圖實(shí)現(xiàn)熱點(diǎn)圖,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue中axios的get請(qǐng)求和post請(qǐng)求的傳參方式、攔截器示例代碼
Post是向服務(wù)器提交數(shù)據(jù)的一種請(qǐng)求,get是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請(qǐng)求,post在真正接受數(shù)據(jù)之前會(huì)先將請(qǐng)求頭發(fā)送給服務(wù)器進(jìn)行確認(rèn),然后才真正發(fā)送數(shù)據(jù),本文給大家介紹vue中axios的get請(qǐng)求和post請(qǐng)求的傳參方式、攔截器示例代碼,感興趣的朋友一起看看吧2023-10-10淺談vue單頁(yè)面中有多個(gè)echarts圖表時(shí)的公用代碼寫(xiě)法
這篇文章主要介紹了淺談vue單頁(yè)面中有多個(gè)echarts圖表時(shí)的公用代碼寫(xiě)法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07