如何在Vue.js中使用AntV X6

這期內容當中小編將會給大家帶來有關如何在Vue.js中使用AntV X6，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

0x1 安裝

根據教程提示安裝 x6 依賴即可，然后新建個容器進行實例化：

<div ref="containerRef" class="area-center-container" />

const data = {
  // 節點
  nodes: [
    {
      id: 'node1', // String，可選，節點的唯一標識
      x: 40,       // Number，必選，節點位置的 x 值
      y: 40,       // Number，必選，節點位置的 y 值
      width: 80,   // Number，可選，節點大小的 width 值
      height: 40,  // Number，可選，節點大小的 height 值
      label: 'hello', // String，節點標簽
    },
    {
      id: 'node2', // String，節點的唯一標識
      x: 160,      // Number，必選，節點位置的 x 值
      y: 180,      // Number，必選，節點位置的 y 值
      width: 80,   // Number，可選，節點大小的 width 值
      height: 40,  // Number，可選，節點大小的 height 值
      label: 'world', // String，節點標簽
    },
  ],
  // 邊
  edges: [
    {
      source: 'node1', // String，必須，起始節點 id
      target: 'node2', // String，必須，目標節點 id
    },
  ],
}

function initGraph() {
  const graph = new Graph({
    container: this.$refs.containerRef,
    grid: {
      size: 10, // 網格大小 10px
      visible: true // 渲染網格背景
    },
    snapline: {
      enabled: true, // 對齊線
      sharp: true
    },
    scroller: {
      enabled: true,
      pageVisible: false,
      pageBreak: false,
      pannable: true
    }
  })
  // 畫布居中
  graph.centerContent()

  graph.fromJSON(data)
}

就這樣最簡單例子實現了，上面不同的參數請參考文檔對應的解釋。

0x2 節點側邊欄

根據文檔的 stencil 例子，可以簡化很多代碼量，直接用封裝好的業務就行了，和上面一樣直接寫個容器實例化即可：

<el-aside ref="stencilRef" class="area-left" />

this.stencil = new Stencil({
    title: '流程節點側邊欄',
    target: graph,
    search: false,
    collapsable: true,
    stencilGraphWidth: this.$refs.stencilRef.$el.clientWidth,
    stencilGraphHeight: this.$refs.stencilRef.$el.clientHeight,
    groups: [
        {
            name: 'group',
            title: '流程圖節點',
            collapsable: false
          }
        ],
    getDropNode: node => {
        let cloneNode = node.clone()
        switch (node.shape) {
            case 'rect':
                cloneNode = new RectShape()
                break
            case 'circle':
                cloneNode = new CircleShape()
                break
            case 'polygon':
                cloneNode = new PolylineShape()
                break
        }
        cloneNode.updateInPorts(graph)
        return cloneNode
    }
})
// 加載節點
this.stencil.load([new Rect(rectInfo), new Circle(circleInfo), new Polygon(polygonInfo)], 'group')

0x3 整合例子

在線：https://codesandbox.io/s/icy-meadow-rqihx

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

上述就是小編為大家分享的如何在Vue.js中使用AntV X6了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。