主要用css+flex布局實作樣式部分，vue實作組件邏輯，首先看下效果吧：
當空間不夠時還可以使用拖拽功能
接下來說明下實作思路
1.首先是實作單個節點樣式，這個很簡單不談了，節點后都跟有一小段連接線，只有葉子節點沒有連接線，使用偽元素after實作連接線，子節點添加額外樣式來取消連接線，
2.然后是父子節點之間的連接線，因為有兩種情況（a.只有一個子節點的；b.有多個子節點），所以要分情況實作
2.1子節點公共樣式process-tree-childNodes設定為inline-block；vertical-align: middle;以此來實作與父節點的樣式對齊； 緊跟的div設定為flex豎排布局
2.2單個子節點添加額外樣式single-node，設定他的偽元素before為橫向連接線,；多個子節點添加額外樣式multiply-node，設定偽元素before為豎向的連接線
2.3多個子節點時的豎向連接線會多出來一部分，通過設定第一個子樹節點的after偽元素和最后一個子樹節點的after偽元素來遮蓋住超出部分，其余的橫向連接線都通過設定子樹節點的before偽元素實作
好了樣式部分的大體思路就是這樣了，
然后是vue部分的實作，主要是各種樣式的添加，樹結構的資料要求組件應該可以遞回使用
最后是拖拽功能，通過指令實作
首先在外部包裝一層，設定overflow：hidden，內部的流程樹組件設定scrolll
initDomwidth方法用來設定樹的寬度，通過獲取所有葉子節點的距離根節點左邊的距離，取最大值做為樹的寬度，防止寬度不夠導致樹變形，為了能夠拖拽，在乘以一個系數作為最終的樹寬度，
我已經上傳了組件到npm，感興趣的盆友可以試試看，npm install process-tree-vue，
最后，這個只是試驗性質的demo，因為流程圖多用于做展示，展示要求各種各樣，可以在此基礎上做調整修改來適應要求，
github地址：https://github.com/sc1992sc/processTree
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/90100.html
標籤：Html/Css
上一篇：HTML常用標簽
下一篇：CSS水平垂直居中