如丝般顺滑!4 行代码就能创建一个数据流工具!
共 2200字,需浏览 5分钟
·
2021-01-07 14:56
【导语】: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/Drawflow
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 Vue
this.editor = new Drawflow(id, Vue);
9、Vue3.0 版本的例子:
import * as Vue from 'vue'
// Pass render Vue
this.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 Home
editor.changeModule('Home');
2、添加节点
var html = `
"text" df-name>`;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);
// Use
editor.addNode('github', 0, 1, 150, 300, 'github', data, 'test', true);
// For vue
import component from '~/components/testcomponent.vue'
editor.registerNode('name', component, props, options);
// Use for vue
editor.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/Drawflow/
- EOF -
更多优秀开源项目(点击下方图片可跳转)
如果觉得本文介绍的开源项目不错,欢迎转发推荐给更多人。
分享、点赞和在看
支持我们分享更多优秀开源项目,谢谢!