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>
  <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; // 緩存實例化的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 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實現拖拽連線”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！