日韩十八禁,国产精品www...xxc,精品久久久中文字幕,在线播放中文字幕,国产后入在线观看,AV豆花,亚洲在钱免费观看,国产欧美一区二区三区四区

【導(dǎo)語】：Drawflow可以用來快速創(chuàng)建數(shù)據(jù)流，支持節(jié)點(diǎn)拖拽、多重連接、數(shù)據(jù)節(jié)點(diǎn)同步、數(shù)據(jù)模塊清除、移動(dòng)端設(shè)備友好等功能。

簡(jiǎn)介

Drawflow 是一個(gè)簡(jiǎn)單的數(shù)據(jù)流庫(kù)，可以用來輕松、快速地創(chuàng)建數(shù)據(jù)流，只需要安裝一個(gè) JS 庫(kù)，運(yùn)行 4 行代碼即可輕松創(chuàng)建一個(gè)頁面。

Drawflow支持以下功能：

1、節(jié)點(diǎn)拖拽

2、多輸入、輸出

3、多重連接

4、刪除節(jié)點(diǎn)和連接

5、添加和刪除輸入、輸出

6、重新路由連接

7、節(jié)點(diǎn)數(shù)據(jù)同步

8、放大、縮小

9、清除數(shù)據(jù)模塊

10、支持模塊

11、編輯模式fixed和edit

12、導(dǎo)入、導(dǎo)出數(shù)據(jù)

13、事件

14、支持移動(dòng)設(shè)備

15、簡(jiǎn)單的JavaScript，無依賴項(xiàng)

16、支持NPM、Vue、Nuxt

安裝使用

項(xiàng)目地址：

https://github.com/jerosoler/Drawflow

1、源碼安裝，執(zhí)行以下命令后，復(fù)制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、創(chuàng)建drawflow的父元素：

<div id="drawflow">div>

7、運(yùn)行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'],????...  }

鼠標(biāo)鍵盤

1、del?鍵用來刪除元素

2、鼠標(biāo)右鍵后會(huì)出現(xiàn)刪除選項(xiàng)

3、按住鼠標(biāo)左鍵可以選中節(jié)點(diǎn)或拖動(dòng)節(jié)點(diǎn)

4、Ctrl+滾動(dòng)輪可以放大縮小

使用

1、在編輯頁面劃分模塊：

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

2、添加節(jié)點(diǎn)

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

3、注冊(cè)節(jié)點(diǎn)：

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、事件通知。可以對(duì)節(jié)點(diǎn)創(chuàng)建、刪除、選中、取消選中、移動(dòng)，創(chuàng)建連接、刪除連接等事件進(jìn)行監(jiān)聽：

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

5、官方提供了一個(gè)在線例子，可以用來嘗試體驗(yàn)，地址是：

https://jerosoler.github.io/Drawflow/

-?EOF -?

更多優(yōu)秀開源項(xiàng)目（點(diǎn)擊下方圖片可跳轉(zhuǎn)）

如果覺得本文介紹的開源項(xiàng)目不錯(cuò)，歡迎轉(zhuǎn)發(fā)推薦給更多人。

分享、點(diǎn)贊和在看

支持我們分享更多優(yōu)秀開源項(xiàng)目，謝謝！

如絲般順滑！4 行代碼就能創(chuàng)建一個(gè)數(shù)據(jù)流工具！