基於vue和svg的樹形UI

 

vue-svg-tree

基於vue和svg的動態樹形UI

截圖

應用

npm install vue-svg-tree

示例

<template>
  <div>
      <vue-svg-tree
        :treeData="treeData"
        svgId='svg'
        ref="svgTree"
      ></vue-svg-tree>
  </div>
</template>

<script>
import VueSvgTree from "vue-svg-tree"
export default {
  components:{
    VueSvgTree
  },
  data(){
    return {
        treeData:[
            {id: 100, name: 'Calamus',  des:'www.calamus.xyz',color:'#E1244E',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你', value: 123, delay: 120, fatherId: 0,tlevel:1},
            {id: 101, name: 'Calamus1', des:'www.calamus.xyz',color:'#E1244E',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 0, fatherId: 100,tlevel:1},
            {id: 102, name: 'Calamus2', des:'www.calamus.xyz',color:'#aaa',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 100, fatherId: 100,tlevel:0},
            {id: 103, name: 'Calamus3', des:'www.calamus.xyz',color:'#aaa',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 123, fatherId: 100,tlevel:0},
            {id: 104, name: 'Calamus4', des:'www.calamus.xyz',color:'#E1244E',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 200, fatherId: 100,tlevel:0},
            {id: 105, name: 'Calamus5', des:'www.calamus.xyz',color:'#aaa',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 123, fatherId: 101,tlevel:0},
            {id: 106, name: 'Calamus6', des:'www.calamus.xyz',color:'#E1244E',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 123, fatherId: 102,tlevel:0},
            {id: 107, name: 'Calamus7', des:'www.calamus.xyz',color:'#E1244E',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 123, fatherId: 102,tlevel:0},
            {id: 108, name: 'Calamus8', des:'www.calamus.xyz',color:'#aaa',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 123, fatherId: 102,tlevel:0},
            {id: 109, name: 'Calamus9', des:'www.calamus.xyz',color:'#aaa',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 123, fatherId: 102,tlevel:0},
            {id: 110, name: 'Calamus10', des:'www.calamus.xyz',color:'#aaa',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 123, fatherId: 102,tlevel:0},
            {id: 111, name: 'Calamus11', des:'www.calamus.xyz',color:'#aaa',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 123, fatherId: 102,tlevel:0},
            {id: 112, name: 'Calamus12', des:'www.calamus.xyz',color:'#aaa',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 300, fatherId: 103,tlevel:0},
            {id: 113, name: 'Calamus13', des:'www.calamus.xyz',color:'#aaa',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 123, fatherId: 103,tlevel:0},
            {id: 114, name: 'Calamus14', des:'www.calamus.xyz',color:'#aaa',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 123, fatherId: 108,tlevel:0},
            {id: 116, name: 'Calamus15', des:'www.calamus.xyz',color:'#aaa',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 123, fatherId: 108,tlevel:0},
            {id: 117, name: 'Calamus16', des:'www.calamus.xyz',color:'#aaa',content:'你能夠選擇愛我或者不愛我，而我只能選擇愛你或者更愛你',value: 123, fatherId: 108,tlevel:0},
          ]
    }
  }
}
</script>

參數

參數	描述	類型	默認/是否必須
treeData	樹形結構數據	Array	必須
direction	樹形方向	String	‘row’/‘col’(縱/橫)
svgId	svgId	String	‘svgId’(一個頁面多個圖時svgId不能相同)
curveness	鏈接線是直線仍是弧線	Boolean	false(false：弧線；true：直線)

ToDo

• [x]橫向顯示還有點小問題沒有修復
• [x]弧度不可調整
• [x]框框樣式暫時不可自定義，暫時建議複製源碼修改，後期會修改成可配置，歡迎pr

連接

github
官網​