您好,登錄后才能下訂單哦!
小編給大家分享一下vue3.x如何使用jsplumb實(shí)現(xiàn)拖拽連線,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
具體內(nèi)容如下
如果想在vue2里面使用jsplumb 可以查看 文章,下面講解如何在vue3.x 里面使用jsplumb進(jìn)行拖拽連線
1、安裝
npm install --save jsplumb
2、引入
<script lang="ts" setup> import {ref, reactive,onMounted} from 'vue' import jsPlumb from 'jsplumb' </script>
3、使用
<template> <h4>jsplumb使用</h4> <div id="container"> <div class="col1"> <div v-for="item in list1" :key="item.nodeId" :id="item.nodeId" name="joint">{{ item.name }}</div> </div> <div class="col2"> <div v-for="item in list2" :key="item.nodeId" :id="item.nodeId" name="data">{{ item.name }}</div> </div> </div> </template> <script lang="ts" setup> import {ref, reactive,onMounted} from 'vue' import jsPlumb from 'jsplumb' //jsplumb使用 let $jsPlumb = jsPlumb.jsPlumb; let jsPlumb_instance = null; // 緩存實(shí)例化的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:''} ]); //接口數(shù)據(jù)點(diǎn) const list2 = reactive([ {name: '數(shù)據(jù)1', nodeId: 'data1'}, {name: '數(shù)據(jù)2', nodeId: 'data2'}, {name: '數(shù)據(jù)3', nodeId: 'data3'}, {name: '數(shù)據(jù)4', nodeId: 'data4'}, {name: '數(shù)據(jù)5', nodeId: 'data5'}, {name: '數(shù)據(jù)6', nodeId: 'data6'} ]); onMounted(()=>{ showPlumb(); }) const showPlumb = ()=> { jsPlumb_instance = $jsPlumb.getInstance({ Container: 'container', // 選擇器id EndpointStyle: {radius: 0.11, fill: '#fff'}, // 端點(diǎn)樣式 PaintStyle: {stroke: '#000', strokeWidth: 2}, // 繪畫樣式,默認(rèn)8px線寬 #456 HoverPaintStyle: {stroke: '#1E90FF'}, // 默認(rèn)懸停樣式 默認(rèn)為null ConnectionOverlays: [ // 此處可以設(shè)置所有箭頭的樣式,因?yàn)槲覀円淖冞B接線的樣式,故單獨(dú)配置 ['Arrow', { // 設(shè)置參數(shù)可以參考中文文檔 location: 1, length: 10, paintStyle: { stroke: '#000', fill: '#000' } }] ], Connector: ['Straight'], // 要使用的默認(rèn)連接器的類型:直線,折線,曲線等 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) }) } // 初始化具體節(jié)點(diǎn) 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 lang="less"> #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>
以上是“vue3.x如何使用jsplumb實(shí)現(xiàn)拖拽連線”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。