【导语】：Drawflow能够用来疾速创立数据流，反对节点拖拽、多重连贯、数据节点同步、数据模块革除、挪动端设施敌对等性能。

简介

Drawflow 是一个简略的数据流库，能够用来轻松、疾速地创立数据流，只须要装置一个 JS 库，运行 4 行代码即可轻松创立一个页面。

Drawflow反对以下性能：

1、节点拖拽

2、多输出、输入

3、多重连贯

4、删除节点和连贯

5、增加和删除输出、输入

6、从新路由连贯

7、节点数据同步

8、放大、放大

9、革除数据模块

10、反对模块

11、编辑模式fixed和edit

12、导入、导出数据

13、事件

14、反对挪动设施

15、简略的JavaScript，无依赖项

16、反对NPM、Vue、Nuxt

装置应用

我的项目地址：

https://github.com/jerosoler/...

1、源码装置，执行以下命令后，复制dist文件夹，引入到文件中即可应用：

git clone https://github.com/jerosoler/Drawflow.git

2、CDN引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"><script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>

3、npm装置：

npm i drawflow

4、Import引入：

import Drawflow from 'drawflow'import styleDrawflow from 'drawflow/dist/drawflow.min.css'

5、Require引入：

var Drawflow = require('drawflow')var styleDrawflow = require('drawflow/dist/drawflow.min.css')

6、创立drawflow的父元素：

<div id="drawflow"></div>

7、运行drawflow

var id = document.getElementById("drawflow");const editor = new Drawflow(id);editor.start();

8、Vue2.0版本的例子：

import Vue from 'vue'// Pass render Vuethis.editor = new Drawflow(id, Vue);

9、Vue3.0 版本的例子：

import * as Vue from 'vue'// Pass render Vuethis.editor = new Drawflow(id, Vue);

10、Nuxt，将以下代码增加到 nuxt.config.js 文件：

build: {    transpile: ['drawflow'],    ...  }

鼠标键盘

1、del 键用来删除元素

2、鼠标右键后会呈现删除选项

3、按住鼠标左键能够选中节点或拖动节点

4、Ctrl+滚动轮能够放大放大

应用

1、在编辑页面划分模块：

editor.addModule('nameNewModule');editor.changeModule('nameNewModule');editor.removeModule('nameModule');// Default Module is Homeeditor.changeModule('Home');

2、增加节点

var html = `<div><input type="text" df-name></div>`;var data = { "name": '' };editor.addNode('github', 0, 1, 150, 300, 'github', data, html);

3、注册节点：

var html = document.createElement("div");html.innerHTML =  "Hello Drawflow!!";editor.registerNode('test', html);// Useeditor.addNode('github', 0, 1, 150, 300, 'github', data, 'test', true);// For vueimport component from '~/components/testcomponent.vue'editor.registerNode('name', component, props, options);// Use for vueeditor.addNode('github', 0, 1, 150, 300, 'github', data, 'name', 'vue');

4、事件告诉。能够对节点创立、删除、选中、勾销选中、挪动，创立连贯、删除连贯等事件进行监听：

editor.on('nodeCreated', function(id) {  console.log("Node created " + id);})

5、官网提供了一个在线例子，能够用来尝试体验，地址是：

https://jerosoler.github.io/D...

开源前哨 日常分享热门、乏味和实用的开源我的项目。参加保护 10万+ Star 的开源技术资源库，包含：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。