gojs 在vue中簡單使用

先推薦一篇文章

栗子1效果圖可折疊的 family tree：此例是單純的html格式，**複製貼上就會出效果

同上需要先定義dom

window.onload=function()

function init() )//樹狀結構的角度});
mydiagram.nodetemplate = gm(
go.node, "vertical",//節點展開方向為豎向展開 
,gm(go.panel, "auto",
,gm(go.shape, "rectangle",//建立矩形容器容器樣式
,new go.binding("fill", "gender", genderbrushconverter)
//樣式來自之前定義的bluegrad物件,無特殊標示(高亮，選中)
),gm(go.textblock,
,new go.binding("text", "name")
),gm(go.panel, "vertical",
,//矩形容器內邊距
gm(go.textblock,
,//標題字型樣式
new go.binding("text", "question")//為標題文字繫結資料question欄位
),// 可選動作列表
gm(go.panel, "vertical",
// 除非有多個動作，否則不可見
,//當無子節點時，不可見
new go.binding("visible", "answer", function(acts) ),//將答案陣列(資料中的子節點陣列)繫結在矩形區域內
// 由表中的標籤和panelexpanderbutton標頭
gm(go.panel, "table",
,gm(go.textblock, "選項",
),gm("panelexpanderbutton", "collapsible",  // 使可見或不可見的物件的名稱
)//下拉摺疊按鈕
),gm(go.panel, "vertical",//第二個子矩形區域(存放答案(資料總的子節點陣列))
,new go.binding("itemarray", "answer")  // 將itemarray繫結到nodedata.actions)) 
)  ),  
gm(go.panel, 
,  gm("treeexpanderbutton")
)//子節點展開/收起按鈕 通常高度為15
);mydiagram.linktemplate = gm(
go.link, go.link.orthogonal,
,//連線圓角角度
gm(go.shape,
//線條寬度
),gm(go.textblock, go.link.orientupright,
,new go.binding("text", "answer"),
// 如果answer欄位未定義，則設定節點不可見
new go.binding("visible", "answer", function(a) )
)); 
var nodedataarray = [
// key 所在位置，gender 顏色，,,
,,,,
,,,,
,,];// 建立family tree模型
mydiagram.model = new go.treemodel(nodedataarray);
}// 顏色
function genderbrushconverter(gender) 

**：需要先設定好固定的dom

import './util/go.js';

// 需要先定義全域性變數，不然會報錯

let go = window.go;
let gm = go.graphobject.make; //定義模版，這裡官網用的$太敏感，被我替換掉了
export default 
},mounted ()); // 圖表居中顯示
var graygrad = gm(go.brush, "linear", ); // 定義圖**式刷
// 定義節點模版
this.mydiagram.nodetemplate = gm(
go.node, "auto",
, // 是否投影
// 定義節點的外部形狀
gm(go.shape, "roundedrectangle", // 形狀為圓角矩形
,new go.binding("fill", "color")),
// 定義節點的文字
gm(go.textblock,
,new go.binding("text", "key")),
gm(go.panel,
,new go.binding("itemarray", "reasonslist")// 漢字說明));
// 連線線樣式
this.mydiagram.linktemplate = gm(
go.link,
,gm(go.shape, )
); },
methods: 
},function())
},doubletreelayout(diagram) );
var layout2 =
gm(go.treelayout,
);layout1.dolayout(leftparts);
layout2.dolayout(rightparts);
diagram.committransaction("double tree layout");
},separatepartsbylayout(diagram, leftparts, rightparts) );
}}

[

],"key": "10.96.140.136"
},],
"dir": "right",
"key": "10.100.17.189"
},],
"dir": "right",
"key": "10.100.17.174"
},],
"dir": "left",
"key": "10.96.140.117"
},],
"dir": "left",
"key": "10.96.140.126"
},],
"dir": "left",
"key": "10.100.136.117"
},],
"dir": "left",
"key": "10.96.140.71"
}]

MockJS在Vue中的簡單使用

mock.js 是一款前端開發中攔截ajax請求再生成隨機資料響應的工具.可以用來模擬伺服器響應.優點是非常簡單方便,無侵入性,基本覆蓋常用的介面資料型別.1 建立 mock.js mock.js 引入 mockjs 模組 import mock from mockjs mock.mock getn...

axios在vue中的簡單配置與使用

尤雨溪之前在微博發布訊息，不再繼續維護vue resource，並推薦大家開始使用 axios axios 是乙個基於promise 用於瀏覽器和 nodejs 的 http 客戶端，它本身具有以下特徵 npm 1 2 3 npm install axios 源 cnpm install axios...

axios在vue中的簡單配置與使用

尤雨溪之前在微博發布訊息，不再繼續維護vue resource，並推薦大家開始使用 axios axios 是乙個基於promise 用於瀏覽器和 nodejs 的 http 客戶端，它本身具有以下特徵 npm npm install axios cnpm install axios 源import...