如何跟vue一起使用呢？ about butterfly

[noonnightstorm]

现在暂时只支持和react配合使用，暂时还不能和vue配合使用，抱歉

[bigfacewo]

@noonnightstorm 好的 谢谢回复

[LaveyD]

// index.vue
<template>
  <div id="dag-canvas"></div>
</template>

<script>
import FlowChartCanvas from './canvas';
import { mockData } from './data';

const Node = require('./node.js');

export default {
  name: 'FlowChart',
  mounted() {
    const root = document.getElementById('dag-canvas');
    this.canvas = new FlowChartCanvas({
       root,
       ...
     });
    this.canvas.draw(mockData, {}, () => {
      this.canvas.focusCenterWithAnimate();
    });
    this.canvas.on('events', (data) => {
      console.log(data);
    });
  },
}
</script>

<style lang="less">
@import '~butterfly-dag/pack/index.css';
@import './node.less';
</style>

// canvas.js
import { Canvas } from 'butterfly-dag/pack/index';

class FlowChartCanvas extends Canvas {
  constructor(...args) {
    super(...args);
    this.listenEventProxy();
  }
  listenEventProxy() {}
  ...
}

export default FlowChartCanvas;

node.js 和example里的基本一样

[noonnightstorm]

// index.vue
<template>
  <div id="dag-canvas"></div>
</template>

<script>
import FlowChartCanvas from './canvas';
import { mockData } from './data';

const Node = require('./node.js');

export default {
  name: 'FlowChart',
  mounted() {
    const root = document.getElementById('dag-canvas');
    this.canvas = new FlowChartCanvas({
       root,
       ...
     });
    this.canvas.draw(mockData, {}, () => {
      this.canvas.focusCenterWithAnimate();
    });
    this.canvas.on('events', (data) => {
      console.log(data);
    });
  },
}
</script>

<style lang="less">
@import '~butterfly-dag/pack/index.css';
@import './node.less';
</style>

// canvas.js
import { Canvas } from 'butterfly-dag/pack/index';

class FlowChartCanvas extends Canvas {
  constructor(...args) {
    super(...args);
    this.listenEventProxy();
  }
  listenEventProxy() {}
  ...
}

export default FlowChartCanvas;

node.js 和example里的基本一样

我这两天会写一个react最佳实践，请问到时候方便贡献一下文档，提供个vue最佳实践呢？

[LaveyD]

// index.vue
<template>
  <div id="dag-canvas"></div>
</template>

<script>
import FlowChartCanvas from './canvas';
import { mockData } from './data';

const Node = require('./node.js');

export default {
  name: 'FlowChart',
  mounted() {
    const root = document.getElementById('dag-canvas');
    this.canvas = new FlowChartCanvas({
       root,
       ...
     });
    this.canvas.draw(mockData, {}, () => {
      this.canvas.focusCenterWithAnimate();
    });
    this.canvas.on('events', (data) => {
      console.log(data);
    });
  },
}
</script>

<style lang="less">
@import '~butterfly-dag/pack/index.css';
@import './node.less';
</style>

// canvas.js
import { Canvas } from 'butterfly-dag/pack/index';

class FlowChartCanvas extends Canvas {
  constructor(...args) {
    super(...args);
    this.listenEventProxy();
  }
  listenEventProxy() {}
  ...
}

export default FlowChartCanvas;

node.js 和example里的基本一样

我这两天会写一个react最佳实践，请问到时候方便贡献一下文档，提供个vue最佳实践呢？

好的，这个组件挺好用的，赞