在vue中使用jointjs

junfeng777 發布于2019-08-22 15:37 / 2126人閱讀

摘要：在中引入的問題，之前在網上搜了很多，都沒有給出一個確切的答案，搗鼓了兩天終于弄明白了，做個記錄。通過這樣引入還不夠，可能會遇到圖可以正常加載，但無法拖拽的問題，遇到這些問題一般是和自己項目中的環境沖突了，導致無法讀取或者讀取錯誤。

在vue中引入joint.js的問題，之前在網上搜了很多，都沒有給出一個確切的答案，搗鼓了兩天終于弄明白了，做個記錄。
首先，我參考了一篇來自stackoverflow的文章點我點我
看完這篇文章，大家應該至少大致怎么做了，下面我們來具體看一下：

首先在vue項目中運行npm install jointjs --save

然后在入口文件，我的是main.js，也有可能是app.js中加入下面兩行，把joint.js和jquery作為全局變量

window.$ = require("jquery");
window.joint = require("jointjs");

這里需要注意的是，joint.js依賴backbone、jquery和lodash，在通過script方式引入時，需要一一引入這些文件，但通過vue的npm時不需要，npm引入的joint.js已經默認封裝好了這些。
通過這樣引入還不夠，可能會遇到圖可以正常加載，但無法拖拽的問題，遇到這些問題一般是joint.js和自己vue項目中的環境沖突了，導致無法讀取或者讀取錯誤。

我原來的項目中安裝了element、iview、axios、vuex、jquery，再安裝joint.js后，jointjs無法正常加載，后來重新建了一個項目，只安裝了element、axios、vuex，為避免jquery和joint.js中的jquery沖突，后來沒有裝jquery。

這樣就行了么？就可以運行上文鏈接中的例子了么？像這樣：

NoNoNo，注意到這里是把渲染放在了created的生命周期里，根據vue的生命周期，是無法找到joint的掛載div的el: $("#myholder")，也就是說，運行會報錯，我的解決方法是把div放了一個click，把joint的內容從created中拿出，放在methods中，需要點擊一下才可顯示哦，還不太完美，以待改進(～￣▽￣)～
也就是說，代碼會變成這樣：

點明一下，通過npm引入只要install jointjs就可以，不需要install lodash、backbone、jquery，也不需要在頁面中導入joint.css文件。筆者之前通過script方式引入joint.js，試了很多次，都沒有成功，一直讀取joint.js文件出錯，如果其他小伙伴嘗試成功，歡迎交流分享。

GPU云服務器云服務器 vue 中使用 webrtc vue中使用webrtc 在php中使用組件在VBScript中使用類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93596.html

在vue中使用jointjs

摘要：在中引入的問題，之前在網上搜了很多，都沒有給出一個確切的答案，搗鼓了兩天終于弄明白了，做個記錄。通過這樣引入還不夠，可能會遇到圖可以正常加載，但無法拖拽的問題，遇到這些問題一般是和自己項目中的環境沖突了，導致無法讀取或者讀取錯誤。在vue中引入joint.js的問題，之前在網上搜了很多，都沒有給出一個確切的答案，搗鼓了兩天終于弄明白了，做個記錄。首先，我參考了一篇來自stackove...

李昌杰 2019-08-30 14:12 評論0 收藏0
jointJS系列之一：jointJS的的初步使用

摘要：由于是基于的，因此對有一定的了解會對的理解和使用有較大幫助。由于是基于的，因此有視圖和模型的概念。掛載的元素關聯聲明的元素的概念，就是圖形顯示的主體，可以有各種不同的形狀，預設有常用的矩形橢圓平行四邊形等。一、jointJS簡介 jointJS是一個基于svg的圖形化工具庫，在畫布上畫出支持拖動的svg圖形，而且可以導出JSON，也能通過JSON配置導入直接生成圖形。可以基于joi...

amuqiao 2019-08-23 10:56 評論0 收藏0
jointJS(一）--關于jointJS的初認識

摘要：最近由于項目需要，開始接觸，妥妥不停刷文檔模式，先寫一下對于的粗淺認識吧。我們可以使用已提供的圖元素繪圖，也可根據需求自定義一些圖元素。另外，它極易上手且操作簡單，并且支持所有的現代瀏覽器。最近由于項目需要，開始接觸jointJS，妥妥不停刷文檔模式，先寫一下對于jointjs的粗淺認識吧。我們可以使用JointJS已提供的圖元素繪圖，也可根據需求自定義一些圖元素。除此之外，Joi...

jas0n 2019-08-20 11:24 評論0 收藏0
1.JointJs Paper

摘要：在該模式下，所有的和會多一個屬性，就行中的陰影有一個屬性表示層級。為了控制哪些元素可以，需要配置。如果允許被潛入到，返回默認所有元素都可以到其他元素中當設置為的時候，用戶將不能將移動到邊界之外。關于JointJs的介紹，有一篇比較好JointJS介紹第一個類Paperjoint.dia.Paper 屬性 el css選擇器，Paper將在該Css選擇的Container下畫SV...

rose 2019-08-19 17:48 評論0 收藏0