jsPlumb外掛 在Vue中的簡單實用
阿新 • • 發佈:2018-11-14
1、什麼是jsplumb?
jsplumb是一個外掛,如果你想在Web網頁繪製圖表或者工作流程設計器,並且可以實現任意拖拽,連線,那麼你可以考慮使用這個外掛。
1.2、基本概念
- Souce 源節點
- Target 目標節點
- Anchor 錨點
- Endpoint 端點
- Connector 連線
2、怎麼使用jsplumb
使用步驟:
1、安裝jsplumb:
npm i jsplumb -S
2、使用
<template> <div> ============================38、Jsplumb(展示圖表的工具)========================= <div id="labelManage"> <div id="main"> <div class="flowchart-demo" id="flowchart-demo"> <div class="window" id="flowchartWindow1">1 </div> <div class="window" id="flowchartWindow2">2 </div> <div class="window" id="flowchartWindow3">3 </div> <div class="window" id="flowchartWindow4">4 </div> </div> </div> </div> </div> </template> <script> import jsplumb from 'jsplumb' export default { name: "vue2-preview_36", data(){ }, /* mounted()函式是vue生命週期中的一個函式 當DOM生成以後所呼叫的函式 這個函式一般都是用來操作DOM * */ mounted(){ this.jsPlumb(); }, methods:{ jsPlumb(){ jsPlumb.ready(function () { /* connect表示 建立連線 source 起始節點 target 目標節點 endpoint 端點型別,形狀 Dot(表示圓形斷電) Rectangle(方形原點) */ jsPlumb.connect({ source: 'flowchartWindow1', target: 'flowchartWindow2', endpoint: 'Rectangle' }) }) } } } </script> <style scoped lang="scss"> .flowchart-demo { width: 800px; height: 600px; border: 1px solid #000; position: relative; } .flowchart-demo .window { border: 1px solid #346789; /*box-shadow 屬性向框新增一個或多個陰影 box-shadow: 2px 2px 19px #aaa; box-shadow: (必需。水平陰影的位置。允許負值) (必需。垂直陰影的位置。允許負值。) (可選。模糊距離。) (可選。陰影的顏色。) 因為是新屬性,為了相容各主流瀏覽器並支援這些主瀏覽器的較低版本,基於主流瀏覽器上使用box-shadow屬性時, 我們需要將屬性的名稱寫成-webkit-box-shadow的形式。 Firefox瀏覽器則需要寫成-moz-box-shadow的形式 歐朋瀏覽器 -o-box-shadow IE>9 -ms-box-shadow -webkit 是在Chrome瀏覽器中用的 一般是指 瀏覽器是webkit核心 -webkit-box-shadow */ box-shadow: 2px 2px 19px #aaa; -o-box-shadow: 2px 2px 19px #aaa; -webkit-box-shadow: 2px 2px 19px #aaa; -moz-box-shadow: 2px 2px 19px #aaa; /* -moz-border-radius 火狐瀏覽器的邊框圓角*/ -moz-border-radius: 0.5em; border-radius: 0.5em; opacity: 0.5; filter: alpha(opacity=80); text-align: center; position: absolute; background-color: #eeeeef; color: black; font-family: helvetica; font-size: 0.9em; line-height: 60px; width: 60px; height: 60px; } .flowchart-demo .window:hover { box-shadow: 2px 2px 19px #444; -o-box-shadow: 2px 2px 19px #444; -webkit-box-shadow: 2px 2px 19px #444; -moz-box-shadow: 2px 2px 19px #444; opacity: 0.6; filter: alpha(opacity=60); } .flowchart-demo .active { border: 1px dotted green; } .flowchart-demo .hover { border: 1px dotted red; } #flowchartWindow1 { top: 34em; left: 5em; } #flowchartWindow2 { top: 7em; left: 36em; } #flowchartWindow3 { top: 27em; left: 48em; } #flowchartWindow4 { top: 23em; left: 22em; } </style>
效果圖: