vue dataflow editor

vue-dataflow编辑器

嘿，您可以使用https://github.com/jagenjo/litegraph.js。

基于Vue-Blocks。 @Ghostiam的项目。

NPM

 npm i @krthr/vue-dataflow-editor

导入app.js的lib

 // app.js or main.js, or the main file
// where you create the vue app
import Vue from "vue" ;
// other imports

import "@krthr/vue-dataflow-editor" ;
import "@krthr/vue-dataflow-editor/dist/vue-dataflow-editor.css" ;

const app = new Vue ( {
  /* ... */
} ) ; 

 < template >
  < vue-blocks-container
    class =" container "
    :blocks-content =" [] "
    :scene.sync =" {} "
  />
</ template > 

浏览器

 < body >
  < div id =" app " >
    < vue-blocks-container
      ref =" container "
      :blocks-content =" [] "
      :scene.sync =" {} "
      class =" container "
    />
  </ div >

  < script src =" https://cdn.jsdelivr.net/npm/vue/dist/vue.js " > </ script >
  < script src =" https://unpkg.com/@krthr/vue-dataflow-editor@latest/dist/vue-dataflow-editor.umd.min.js " > </ script >
  < script >
    new Vue ( {
      el : "#app" ,

      // ...
    } ) ;
  </ script >
</ body >