使用 Vue 2 和 jsPlumb 来实现绘制流程图并具备连线箭头和拖拽功能的基本步骤如下:
1. 安装 jsPlumb
首先,你需要安装 jsplumb
。可以通过 npm 或者直接引入 CDN 来使用。
如果使用 npm:
npm install jsplumb --save
如果直接在 HTML 中引入,可以在你的 <head>
部分加入以下 CDN 链接:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsplumb/2.15.6/jsplumb.min.js"></script>
2. 创建 Vue 组件
创建一个 Vue 组件来实现流程图的绘制,拖拽和连线功能。
<template>
<div id="container" class="container">
<div
v-for="(item, index) in nodes"
:key="index"
class="node"
:id="'node-' + index"
@mousedown.prevent="startDrag($event, index)"
>
{{ item.label }}
</div>
</div>
</template>
<script>
import { initJsPlumb } from "jsplumb"; // 若你是用 npm 引入的
export default {
data() {
return {
nodes: [
{ label: 'Node 1' },
{ label: 'Node 2' },
{ label: 'Node 3' }
],
isDragging: false,
dragItemIndex: null,
offsetX: 0,
offsetY: 0,
};
},
mounted() {
this.initJsPlumb();
this.connectNodes();
},
methods: {
initJsPlumb() {
const instance = jsPlumb.getInstance({
Container: "container",
PaintStyle: { strokeWidth: 2, stroke: "#567567" },
EndpointStyle: { radius: 5, fillStyle:"#567567" }
});
// 为每个节点添加连接点
this.nodes.forEach((_, index) => {
instance.addEndpoint(`node-${index}`, {
anchors:["Continuous", "Continuous"],
isSource:true,
isTarget:true,
paintStyle:{ fill:"#567567"},
connector:[ "Bezier", { curviness:63 }]
});
// 可调整配置进行更多自定义设置,如连线风格等
// 初始化节点位置(可选)
instance.draggable(`node-${index}`);
instance.bind("click", function (connection) {
instance.deleteConnection(connection);
});
instance.bind("connection", function (connInfo) {
console.log(connInfo);
// 在这里可以做一些事情,比如存储连接关系等。
});
});
this.jsPlumbInstance = instance;
},
connectNodes() {
// 手动连接节点示例,可根据需求更改逻辑
this.jsPlumbInstance.connect({ source:"node-0", target:"node-1"});
this.jsPlumbInstance.connect({ source:"node-1", target:"node-2"});
},
startDrag(event, index) {
this.isDragging = true;
this.dragItemIndex = index;
const node = document.getElementById(`node-${index}`);
this.offsetX = event.clientX - node.getBoundingClientRect().left;
this.offsetY = event.clientY - node.getBoundingClientRect().top;
document.addEventListener('mousemove', this.onDrag);
document.addEventListener('mouseup', this.stopDrag);
},
onDrag(event) {
if (!this.isDragging) return;
const node = document.getElementById(`node-${this.dragItemIndex}`);
node.style.position = 'absolute';
node.style.left = `${event.clientX - this.offsetX}px`;
node.style.top = `${event.clientY - this.offsetY}px`;
// 更新 jsPlumb 的位置
this.jsPlumbInstance.repaintEverything();
},
stopDrag() {
if (!this.isDragging) return;
this.isDragging = false;
document.removeEventListener('mousemove', this.onDrag);
document.removeEventListener('mouseup', this.stopDrag);
}
}
};
</script>
<style scoped>
.container {
position: relative;
width: 800px; /* 设置合适的宽度 */
height: 600px; /* 设置合适的高度 */
border: solid 1px #ccc;
}
.node {
width: auto; /* 根据内容自适应 */
padding:10px;
background-color:#f8f9fa;
border-radius:.5rem;
box-shadow:.1rem .1rem .5rem rgba(0,0,0,.16);
position:absolute; /* 用于绝对定位 */
}
</style>
总结
以上代码展示了如何在 Vue 中结合 jsPlumb
实现简单的流程图,包括节点创建、拖拽和连接功能。你可以根据自己的需求进一步扩展和定制,例如增加保存功能、编辑节点信息等。
确保您已经正确安装并引入了所需库,并针对具体需求调整样式及事件处理程序。
内容由零声教学AI助手提供,问题来源于学员提问