vue3.x如何使用jsplumb实现拖拽连线(jsplumb,vue3.x,开发技术)

具体内容如下

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

1、安装

npminstall--savejsplumb

2、引入

<scriptlang="ts"setup>import{ref,reactive,onMounted}from'vue'importjsPlumbfrom'jsplumb'</script>

3、使用

<template><h4>jsplumb使用</h4><divid="container"><divclass="col1"><divv-for="iteminlist1":key="item.nodeId":id="item.nodeId"name="joint">{{item.name}}</div></div><divclass="col2"><divv-for="iteminlist2":key="item.nodeId":id="item.nodeId"name="data">{{item.name}}</div></div></div></template><scriptlang="ts"setup>import{ref,reactive,onMounted}from'vue'importjsPlumbfrom'jsplumb'//jsplumb使用let$jsPlumb=jsPlumb.jsPlumb;letjsPlumb_instance=null;//缓存实例化的jsplumb对象//模型轴constlist1=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:''}]);//接口数据点constlist2=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();})constshowPlumb=()=>{jsPlumb_instance=$jsPlumb.getInstance({Container:'container',//选择器idEndpointStyle:{radius:0.11,fill:'#fff'},//端点样式PaintStyle:{stroke:'#000',strokeWidth:2},//绘画样式，默认8px线宽#456HoverPaintStyle:{stroke:'#1E90FF'},//默认悬停样式默认为nullConnectionOverlays:[//此处可以设置所有箭头的样式，因为我们要改变连接线的样式，故单独配置['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(leti=0;i<list1.length;i++){initLeaf(list1[i].nodeId,'joint')}for(leti=0;i<list2.length;i++){initLeaf(list2[i].nodeId,'data')}})constjoint=document.getElementsByName('joint')constdata=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)})}//初始化具体节点constinitLeaf=(id,type)=>{constins=jsPlumb_instance;constelem=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><stylescopedlang="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:0017px0;background:#ef631e;color:#fff;}</style>