基於Vue的任務節點圖繪製插件（vue-task-node）

簡介：

vue-task-node 是一個基於Vue的任務節點圖繪製插件（vue-task-node is a Vue based task node mapping plug-in） 此篇博客會隨插件版本的更新而不斷更新，這裏的教材說明可能不是最新的，請移步👉在線教程 vidanao.com/ 起源：mml機器學習平臺:vidanao.com/ml/#/

在線Demo
codesandbox.io/embed/5vvpy…

首先來張圖展現一下

❤MyHome:🏡
github：github.com/Liwengbin
思否：segmentfault.com/u/vidanao
掘金：juejin.im/user/5bd967…
npm：www.npmjs.com/~liwenbing

✉：liwenbingmsc@qq.com

1、安裝

npm install vue-task-node -S

複製代碼

2、引入

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import {TaskNode, TaskNodeStore} from 'vue-task-node'
import 'vue-task-node/dist/css/vnode.css'
Vue.use(TaskNode)
Vue.config.productionTip = false
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    TaskNodeStore
  }
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})
複製代碼

3、教程

vidanao.com/

5、版本

版本	說明	更新時間	是否支持拖拽	是否支持節點連線
1.0.0	開端,根據數據繪製任務節點	2019年1月16日	否	否
1.0.1	修改代碼規範Eslin	2019年1月17日	否	否
1.0.2	調試入口文件	2019年1月17日	否	否
1.0.3	npm下載包錯誤修改	2019年1月17日	否	否
1.0.4	添加鼠標右擊後返回右擊的node數據	2019年1月18日	否	否
1.0.x	優化配置文件	2019年1月x日	否	否
1.1.0	代碼結構調整，組件從新封裝，樣式使用less寫	2019年2月28日	是	否
1.1.1	解決dist文件沒法上傳問題	2019年2月28日	是	否
1.1.2	解決dist文件沒法上傳問題	2019年2月28日	是	否
1.1.3	解決index.js找不到組件問題	2019年2月28日	是	否
1.1.4	解決index.js找不到組件問題	2019年2月28日	是	否
1.1.5	調整工做區樣式問題	2019年3月1日	是	否
1.1.6	調整節點的事件傳遞	2019年3月1日	是	否
1.2.0	新增節點連線	2019年5月12日	是	是
1.2.1	新增路徑鼠標事件	2019年5月23日	是	是
1.3.0	工做區外拖拽節點到工做區內	2019年6月23日	是	是
1.3.3	新增全局參數設置	2019年6月29日	是	是
1.3.4	工做區縮放	2019年7月8日	是	是

6、將來新版本

1.3.x 節點拖拽出工做區問題

7、結語

原文在GitHub
若是以爲對你有幫助 但願能給我一個小小的start vue-task-node
如過你對vue-task-node感興趣就聯繫我和我一塊兒開發他吧😘
感謝您看到最後！