亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue使用jsMind思維導(dǎo)圖的實(shí)戰(zhàn)指南

 更新時(shí)間:2023年01月16日 09:28:30   作者:肖晗  
jsMind是一個(gè)顯示/編輯思維導(dǎo)圖的純javascript類庫(kù),其基于 html5的canvas進(jìn)行設(shè)計(jì),這篇文章主要給大家介紹了關(guān)于vue使用jsMind思維導(dǎo)圖的相關(guā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è)置了常用的backgroundwidth等,需要自己的話得重構(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。

修改方式:

  1. 每一個(gè)節(jié)點(diǎn)可定義一個(gè)dataClass 屬性,不寫(xiě)是未定義不顯示任何菜單,名字自定義取
  2. 對(duì)應(yīng)的menu中的injectionList數(shù)組增加dataClass屬性
  3. 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ò)展。感謝jsMindjsmind.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)度值功能

    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-06
  • uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果

    uni-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)單解決方法

    警告[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-12
  • Vue3組件更新中的DOM?diff算法示例詳解

    Vue3組件更新中的DOM?diff算法示例詳解

    虛擬dom是當(dāng)前前端最流行的兩個(gè)框架(vue和react)都用到的一種技術(shù),都說(shuō)他能幫助vue和react提升渲染性能,提升用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于Vue3組件更新中的DOM?diff算法的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • vue3獲取、設(shè)置元素高度的代碼舉例

    vue3獲取、設(shè)置元素高度的代碼舉例

    這篇文章主要給大家介紹了關(guān)于vue3獲取、設(shè)置元素高度的相關(guān)資料,小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單易懂,需要的朋友可以參考下
    2024-08-08
  • Vue組件創(chuàng)建和傳值的方法

    Vue組件創(chuàng)建和傳值的方法

    這篇文章給大家介紹了vue組件創(chuàng)建和傳值的方法,創(chuàng)建組件有三種方法,文中給大家介紹的非常詳細(xì),父組件傳值給子組件的方法,給大家介紹的也非常詳細(xì),需要的朋友參考下吧
    2018-08-08
  • Vue封裝組件利器之$attrs、$listeners的使用

    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高德地圖實(shí)現(xiàn)熱點(diǎn)圖代碼實(shí)例

    vue.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-04
  • vue中axios的get請(qǐng)求和post請(qǐng)求的傳參方式、攔截器示例代碼

    vue中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ě)法

    這篇文章主要介紹了淺談vue單頁(yè)面中有多個(gè)echarts圖表時(shí)的公用代碼寫(xiě)法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07

最新評(píng)論