共计 2291 个字符,预计需要花费 6 分钟才能阅读完成。
【导语】: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 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 = `<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);
// 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/D…
开源前哨
日常分享热门、乏味和实用的开源我的项目。参加保护 10 万 + Star 的开源技术资源库,包含:Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。