Vue.js的流程图编辑器，使您可以创建带有连接线和方向箭头的动态可拖动工作流程图。

如何使用它：

1.导入vue-blocks组件。

import VueBlocksContainer from './vue-blocks/src';

2.将VueBlocksContainer组件添加到应用模板。

<template>
  <div id="app">
    <VueBlocksContainer
      ref="container"
      :blocksContent="blocks"
      :scene.sync="scene"
      class="container"/>
  </div>
</template>

3.注册组件并定义流程图的块，节点，场景。

export default {
  name: 'App',
  components: {
    VueBlocksContainer
  },
  data: function () {
    return {
      blocks: [
        {
          name: 'test',
          title: 'Test block',
          family: 'Test',
          description: 'Description text',
          fields: [
            {
              name: 'in1',
              type: 'event',
              attr: 'input'
            },
            {
              name: 'in2',
              type: 'event',
              attr: 'input'
            },
            {
              name: 'out1',
              type: 'event',
              attr: 'output'
            },
            {
              name: 'out2',
              type: 'event',
              attr: 'output'
            }
          ]
        }
      ],
      scene: {
        blocks: [
          {
            id: 1,
            x: 0,
            y: 0,
            name: 'test',
            title: 'Test block',
            values: {
              property: [
                {
                  name: 'message',
                  type: 'string'
                }
              ]
            }
          },
          {
            id: 2,
            x: 0,
            y: 50,
            name: 'test',
            title: 'Test block 2',
            values: {
              property: [
                {
                  name: 'message',
                  type: 'string'
                }
              ]
            }
          }
        ],
        links: [],
        container: {
          centerX: 0,
          centerY: 0,
          scale: 1
        }
      }
    }
  }
}