vue3.x 使用jsplumb實現拖拽連線

更新時間：2022年03月29日 17:07:05 作者：qq_37656005

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

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

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

1、安裝

npm install --save jsplumb

2、引入

<script lang="ts" setup>
? import {ref, reactive,onMounted} from 'vue'
? import jsPlumb from 'jsplumb'
</script>

3、使用

<template>
? <h3>jsplumb使用</h3>
? <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; // 緩存實例化的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)
? ? ? ? })

? ? }

? ? // 初始化具體節(jié)點
? ? 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>

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

您可能感興趣的文章: