简单介绍vue3.x 使用jsplumb实现拖拽连线

374次阅读

共计 2202 个字符，预计需要花费 6 分钟才能阅读完成。

导读	这篇文章主要为大家详细介绍了 vue3.x 使用 jsplumb 实现拖拽连线，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了 vue3.x 使用 jsplumb 实现拖拽连线的具体代码，供大家参考，具体内容如下

如果想在 vue2 里面使用 jsplumb 可以查看文章，下面讲解如何在 vue3.x 里面使用 jsplumb 进行拖拽连线

1、安装

npm install --save jsplumb

2、引入

import {ref, reactive,onMounted} from 'vue'
  import jsPlumb from 'jsplumb'

3、使用
简单介绍 vue3.x 使用 jsplumb 实现拖拽连线

  jsplumb 使用
  
        
            {{item.name}}
        
        
            {{item.name}}
        
    

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  {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
            })
        }
    }
 

 

 #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;
  }

以上就是本文的全部内容，希望对大家的学习有所帮助。