共计 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、使用
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;
}
以上就是本文的全部内容,希望对大家的学习有所帮助。
正文完
星哥说事-微信公众号
![post-qrcode](https://www.xgss.net/wp-content/uploads/2023/07/二维码-微信公众号256x256.jpg)