簡單介紹vue3.x 使用jsplumb實現拖拽連線

導讀	這篇文章主要為大家詳細介紹了vue3.x 使用jsplumb實現拖拽連線，文中示例程式碼介紹的非常詳細，具有一定的參考價值，感興趣的小夥伴們可以參考一下

本文例項為大家分享了vue3.x 使用jsplumb實現拖拽連線的具體程式碼，供大家參考，具體內容如下

如果想在vue2裡面使用jsplumb 可以檢視 文章，下面講解如何在vue3.x 裡面使用jsplumb進行拖拽連線

1、安裝

npm install --save jsplumb

2、引入

< script setup>   import {ref, reactive,onMounted} from 'vue'   import jsPlumb from 'jsplumb' < /script>

3、使用

< template>   < h3>jsplumb使用   < div id="container">         < div>             < div v-for="item in list1" :key="item.nodeId" :id="item.nodeId" name="joint">{{ item.name }}         < /div>         < div>             < div v-for="item in list2" :key="item.nodeId" :id="item.nodeId" name="data">{{ item.name }}         < /div>     < /div> < /template> < script setup>   import {ref, reactive,onMounted} from 'vue'   import jsPlumb from 'jsplumb'     //jsplumb使用     let $jsPlumb = jsPlumb.jsPlumb;     let jsPlumb_instance = null; // 快取例項化的jsplumb物件     //模型軸     const list1 = reactive([         {name: "name1", nodeId: "name1", axis: '', type:''},         {name: "name2", nodeId: "name2", axis: '', type:''},         {name: "name3", nodeId: "name3", axis: '', type:''},         {name: "name4", nodeId: "name4", axis: '', type:''},         {name: "name5", nodeId: "name5", axis: '', type:''},         {name: "name6", nodeId: "name6", axis: '', type:''}     ]);     //介面資料點     const list2 = reactive([         {name: '資料1', nodeId: 'data1'},         {name: '資料2', nodeId: 'data2'},         {name: '資料3', nodeId: 'data3'},         {name: '資料4', nodeId: 'data4'},         {name: '資料5', nodeId: 'data5'},         {name: '資料6', nodeId: 'data6'}     ]);       onMounted(()=>{         showPlumb();     })       const showPlumb = ()=> {         jsPlumb_instance = $jsPlumb.getInstance({             Container: 'container', // 選擇器id             EndpointStyle: {radius: 0.11, fill: '#fff'}, // 端點樣式             PaintStyle: {stroke: '#000', strokeWidth: 2}, // 繪畫樣式，預設8px線寬  #456             HoverPaintStyle: {stroke: '#1E90FF'}, // 預設懸停樣式  預設為null             ConnectionOverlays: [ // 此處可以設定所有箭頭的樣式，因為我們要改變連線線的樣式，故單獨配置                 ['Arrow', { // 設定引數可以參考中文文件                     location: 1,                     length: 10,                     paintStyle: {                         stroke: '#000',                         fill: '#000'                     }                 }]             ],             Connector: ['Straight'], // 要使用的預設聯結器的型別：直線，折線，曲線等             DrapOptions: {cursor: 'crosshair', zIndex: 2000}         },)           console.log(jsPlumb_instance)           jsPlumb_instance.batch(() => {               for (let i = 0; i < list1.length; i++) {                 initLeaf(list1[i].nodeId, 'joint')             }             for (let i = 0; i < list2.length; i++) {                 initLeaf(list2[i].nodeId, 'data')             }         })           const joint = document.getElementsByName('joint')         const data = document.getElementsByName('data')           jsPlumb_instance.setSourceEnabled(joint, true)         jsPlumb_instance.setTargetEnabled(data, true)         jsPlumb_instance.setDraggable(joint, false) // 是否支援拖拽         jsPlumb_instance.setDraggable(data, false) // 是否支援拖拽           jsPlumb_instance.bind('click',  (conn, originalEvent) => {             jsPlumb_instance.deleteConnection(conn)         })       }       // 初始化具體節點     const initLeaf = (id, type)=> {         const ins = jsPlumb_instance;         const elem = document.getElementById(id)         if (type == 'joint') {             ins.makeSource(elem, {                 anchor: [1, 0.5, 0, 0], // 左 上 右 下                 allowLoopback: false,                 maxConnections: 1             })         } else {             ins.makeTarget(elem, {                 anchor: [0, 0.5, 0, 0],                 allowLoopback: false,                 maxConnections: 1             })         }     }   < /script>   < style scoped>  #container {     position: relative;       margin-top: 20px;       width: 100%;       height: 300px;   }     .col2, .col1 {       float: left;       text-align: center;   }     .col1 {       width: 80px;   }     .col2 {       width: 120px;       margin-left: 80px;   }     #container > div > div {       line-height: 30px;       margin: 0 0 17px 0;       background: #ef631e;       color: #fff;   } < /style>

以上就是本文的全部內容，希望對大家的學習有所幫助。

原文來自：